/* ============================================
   Navigation Styles - Table of Contents
   ============================================

   1. CSS Custom Properties
   2. Base Navigation Styles
   3. Desktop Dropdown Navigation
   4. Mobile Navigation & Overlay
   5. Close Button & Hamburger Icon
   6. Elayne Navigation Extensions
      6.1 Right-Aligned Overlay
      6.2 Left-Aligned Overlay

   ============================================ */

/* ============================================
   1. CSS Custom Properties
   ============================================ */

:root {
	/* Spacing */
	--nav-spacing-half: calc(var(--wp--preset--spacing--small) / 2);
	--nav-spacing-small: var(--wp--preset--spacing--small);
	--nav-spacing-medium: var(--wp--preset--spacing--medium);
	--nav-spacing-large: var(--wp--preset--spacing--large);

	/* Sizing */
	--nav-chevron-size: 12px;
	--nav-dropdown-min-width: 225px;
	--nav-mobile-gap: 8px;

	/* Z-index scale */
	--nav-z-dropdown: 20;
	--nav-z-close-button: 100;

	/* Borders & Shadows */
	--nav-border-radius: 5px;
	--nav-dropdown-shadow: var(--wp--preset--shadow--small-light);
}

/* ============================================
   2. Base Navigation Styles
   ============================================ */

.editor-styles-wrapper .wp-block-navigation__container > .wp-element-button {
	padding: 0;
}


/* ============================================
   3. Desktop Dropdown Navigation
   ============================================ */

/* Dropdown container - only on desktop, not in overlay mode */
@media only screen and (min-width: 600px) {
	header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container {
		border: none;
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--snug);
		border-radius: var(--nav-border-radius);
		min-width: var(--nav-dropdown-min-width);
		margin-left: calc(var(--nav-spacing-medium) * -1);
		margin-top: var(--nav-dropdown-spacing, 16px);
		padding: 0;
		z-index: var(--nav-z-dropdown);
		box-shadow: var(--nav-dropdown-shadow);
	}
}

/* Remove WordPress core submenu borders in overlay mode
   Note: !important required to override WP core's border styling in overlay mode */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: none !important;
	box-shadow: none !important;
}

/* Hover bridge: prevents dropdown from closing when cursor crosses the margin-top gap */
@media only screen and (min-width: 600px) {
	header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
		content: '';
		position: absolute;
		top: calc(var(--nav-dropdown-spacing, 16px) * -1);
		left: 0;
		right: 0;
		height: var(--nav-dropdown-spacing, 16px);
	}
}

/* Nested dropdown positioning */
header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-left: 0;
	top: 0;
}

/* Dropdown top/bottom padding and border radius — desktop only, not in overlay */
@media only screen and (min-width: 600px) {
	header .wp-block-navigation:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:first-child {
		padding-top: var(--nav-spacing-small);
		border-top-left-radius: var(--nav-border-radius);
		border-top-right-radius: var(--nav-border-radius);
	}

	header .wp-block-navigation:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:last-child {
		padding-bottom: var(--nav-spacing-small);
		border-bottom-left-radius: var(--nav-border-radius);
		border-bottom-right-radius: var(--nav-border-radius);
	}
}

/* Submenu icon margin */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: var(--nav-spacing-small);
}

/* Ensure chevron SVG strokes are visible */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	color: inherit;
	transition: transform 0.2s ease;
	width: var(--nav-chevron-size);
	height: var(--nav-chevron-size);
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg path {
	stroke: currentColor;
	fill: none;
}

/* Rotate chevron when submenu is open (desktop dropdown) */
@media only screen and (min-width: 600px) {
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon svg,
	.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}
}

/* Rotate chevron when submenu is open (mobile overlay) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	/* transform: translateY(-50%) rotate(180deg); */
	transform: rotate(180deg);
}

/* Override WordPress core hiding of chevrons in overlay - make them visible */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: inline-block;
}

/* Position context for chevron in overlay */
.wp-block-navigation__responsive-container.is-menu-open .has-child {
	position: relative;
}

/* Position the chevron at the right edge of the item */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	position: absolute;
	right: 0;
	/* top: 50%; */
	/* transform: translateY(-50%); */
	width: 32px;
	height: 32px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0;
	z-index: 10;
}

/* Ensure chevron SVG uses the correct size */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	width: var(--nav-chevron-size);
	height: var(--nav-chevron-size);
}

/* Right padding so link text does not run under the chevron */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	padding-right: 32px;
}

/* Dropdown link padding */
header .wp-block-navigation :where(.wp-block-navigation__submenu-container) a,
header .wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
	padding: var(--nav-spacing-small) var(--nav-spacing-medium);
}

/* ============================================
   4. Mobile Navigation & Overlay
   ============================================ */

/* Hide elements on mobile (e.g., social links in header) */
@media only screen and (max-width: 781px) {
	.hide-on-mobile {
		display: none !important;
	}
}

/* Hide elements on desktop/tablet (e.g., show only on mobile) */
@media only screen and (min-width: 782px) {
	.hide-on-desktop {
		display: none !important;
	}
}

/* Override WordPress core gap with consistent spacing (all screen sizes) */
.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-navigation__submenu-container {
	row-gap: var(--nav-mobile-gap);
	column-gap: 0;
}

/* Remove excessive submenu padding in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	padding-top: 0;
}

/* Remove desktop first-child padding-top from submenu items in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li:first-child {
	padding-top: 0;
}

/* Hide submenus by default in overlay.
   WP core forces opacity:1 + visibility:visible for all submenus in overlay mode.
   We counter with opacity:0 + visibility:hidden, matching WP core's own hide/show pattern.
   Only shows when the toggle button has aria-expanded="true" (WP Interactivity API). */
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	opacity: 0 !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	padding-top: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	overflow: visible !important;
}

/* Submenu link padding in overlay - tighter spacing */
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__submenu-container a,
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
	padding: var(--nav-spacing-half) 0;
}

/* Mobile-specific styles */
@media only screen and (max-width: 600px) {
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
		padding: var(--nav-spacing-large) var(--nav-spacing-medium) var(--nav-spacing-large) var(--nav-spacing-large);
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content {
		padding-top: calc(var(--nav-spacing-small) + 2rem);
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
		width: 100%;
		column-gap: 0;
		row-gap: var(--nav-mobile-gap);
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container ul:not(.wp-block-page-list) {
		padding-left: var(--nav-spacing-medium);
		margin: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open ul.wp-block-navigation__submenu-container {
		border-radius: 0;
		margin: 5px 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li {
		width: 100%;
		padding: 0;
		position: relative;
	}

	/* Submenu items auto width for proper chevron positioning */
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__submenu-container li {
		width: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container ul li:hover a:hover:before {
		text-decoration: none;
	}

	/* Adjust first menu item to prevent conflict with close button */
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > li:first-child > a {
		padding-top: 0;
	}

	/* Mobile submenu styling */
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item .wp-block-navigation__submenu-container {
		padding: 0 0 0 var(--nav-spacing-large);
		font-size: var(--wp--preset--font-size--base);
		margin-left: 0;
	}

	/* Mobile menu links */
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-item__content {
		width: auto;
		padding: var(--nav-spacing-half) 0;
	}

	/* Mobile open/close buttons */
	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		padding: 4px;
		border-radius: 3px;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--main);
	}

	.wp-block-navigation__responsive-container-close {
		background: var(--wp--preset--color--tertiary);
		color: var(--wp--preset--color--main);
	}

	/* Mobile button class styling */
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container .wp-element-button {
		margin-top: var(--nav-spacing-small);
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container .wp-element-button .wp-block-navigation-item__content {
		width: 100%;
		text-align: center;
		font-size: var(--wp--preset--font-size--base);
		padding: var(--nav-spacing-small);
	}
}

/* ============================================
   5. Close Button & Hamburger Icon
   ============================================ */

/* Close button position in overlay */
.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: var(--nav-spacing-small);
	right: var(--nav-spacing-small);
	z-index: var(--nav-z-close-button);
}

/* Add spacing between close button and menu items (desktop overlay) */
@media only screen and (min-width: 601px) {
	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content {
		padding-top: calc(var(--nav-spacing-small) + 2rem);
	}
}

/* Reduce admin bar spacing */
.admin-bar .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-dialog {
	margin-top: 20px;
}

/* Large hamburger icon */
.elayne-hamburger-large .wp-block-navigation__responsive-container-open svg,
.elayne-hamburger-large button[aria-label*="Open menu"] svg {
	width: 32px;
	height: 32px;
}

.elayne-hamburger-large .wp-block-navigation__responsive-container-open svg line,
.elayne-hamburger-large button[aria-label*="Open menu"] svg line {
	stroke-width: 2.5;
}

/* ============================================
   6. Elayne Navigation Extensions
   ============================================ */

/* --------------------------------------------
   6.1 Right-Aligned Overlay (`.has-right-aligned-overlay`)
   For headers where hamburger is on the right (e.g. social-logo-hamburger patterns).
   Aligns overlay menu items, chevrons, and submenus to the right.
   -------------------------------------------- */

/* Position overlay content container on the right side
   Note: !important needed to override WP core's centering styles */
.has-right-aligned-overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	margin-left: auto !important;
	margin-right: 0 !important;
	max-width: 400px;
	padding-right: var(--nav-spacing-small);
}

/* Right-align the main navigation container
   Note: !important needed to override WP core's align-items: center */
.has-right-aligned-overlay .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-end !important;
}

/* Right-align menu items
   Note: !important needed to override WP core's centering */
.has-right-aligned-overlay .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	text-align: right !important;
	justify-content: flex-end !important;
}

/* Right-align submenus */
.has-right-aligned-overlay .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	align-items: flex-end !important;
}

/* Position close (X) button on the right
   Note: !important needed to override WP core positioning */
.has-right-aligned-overlay .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: var(--nav-spacing-small) !important;
	right: var(--nav-spacing-small) !important;
	left: auto !important;
	z-index: var(--nav-z-close-button);
}

/* --------------------------------------------
   6.2 Left-Aligned Overlay (`.has-left-aligned-overlay`)
   For headers where hamburger is on the left (e.g. header-mobile pattern).
   Aligns overlay menu items, chevrons, and close button to the left.
   -------------------------------------------- */

/* Position overlay content container on the left side
   Note: !important needed to override WP core's centering styles */
.has-left-aligned-overlay .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 400px;
	padding-left: var(--nav-spacing-small);
}

/* Left-align the main navigation container
   Note: !important needed to override WP core's align-items: center */
.has-left-aligned-overlay .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-start !important;
}

/* Left-align menu items
   Note: !important needed to override WP core's centering */
.has-left-aligned-overlay .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	text-align: left !important;
	justify-content: flex-start !important;
}

/* Left-align submenus */
.has-left-aligned-overlay .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
}

/* Position close (X) button on the left
   Note: !important needed to override WP core positioning */
.has-left-aligned-overlay .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: var(--nav-spacing-small) !important;
	left: var(--nav-spacing-small) !important;
	right: auto !important;
	z-index: var(--nav-z-close-button);
}