/**
 * Navigation Styles
 * Refined link treatments with hover and active states
 * Using high specificity to override WordPress core styles
 */

/* ==========================================================================
   Base - Remove default underlines, set transitions
   ========================================================================== */

.wp-block-navigation a.wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus,
.wp-block-navigation a.wp-block-navigation-item__content:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content {
	position: relative;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Default Style - Subtle color shift on hover, accent for active
   ========================================================================== */

.wp-block-navigation:not([class*="is-style-"]) .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--muted-foreground);
}

.wp-block-navigation:not([class*="is-style-"]) .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation:not([class*="is-style-"]) .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Underline Style - Animated line slides in from left
   ========================================================================== */

.wp-block-navigation.is-style-underline .wp-block-navigation-item a.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--foreground);
	transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-navigation.is-style-underline .wp-block-navigation-item a.wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* Active state - always visible, uses primary color */
.wp-block-navigation.is-style-underline .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::after,
.wp-block-navigation.is-style-underline .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content::after {
	width: 100%;
	background-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Underline Centered Style - Line fades in from center
   ========================================================================== */

.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item a.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--foreground);
	opacity: 0;
	transition: width 200ms ease, opacity 200ms ease;
}

.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item a.wp-block-navigation-item__content:hover::after {
	width: 100%;
	opacity: 1;
}

/* Active state - shorter accent line, always visible */
.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::after,
.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content::after {
	width: 24px;
	opacity: 1;
	background-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Pill Style - Rounded background appears on hover
   ========================================================================== */

.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--border-radius--md, 6px);
	transition: background-color 200ms ease, color 200ms ease;
}

.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--muted);
}

/* Active state - subtle persistent background */
.wp-block-navigation.is-style-pill .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation.is-style-pill .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
}

/* ==========================================================================
   Pill Filled Style - Always has background, darkens on hover
   ========================================================================== */

.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--border-radius--md, 6px);
	background-color: var(--wp--preset--color--secondary);
	transition: background-color 200ms ease, color 200ms ease;
}

.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--muted);
}

/* Active state - primary color treatment */
.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

/* ==========================================================================
   Mobile Overlay Menu Refinements
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	animation: navFadeIn 200ms ease forwards;
}

@keyframes navFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--8, 2rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	padding: var(--wp--preset--spacing--3, 0.75rem) 0;
}

/* Mobile active state indicator */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content::before {
	content: '';
	position: absolute;
	left: -1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.25em;
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* ==========================================================================
   Submenu Styles
   ========================================================================== */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--md, 6px);
	box-shadow: var(--wp--custom--shadow--md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
	padding: var(--wp--preset--spacing--2, 0.5rem) 0;
	min-width: 180px;
}

.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--2, 0.5rem) var(--wp--preset--spacing--4, 1rem);
}

.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Dark Mode Adjustments
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content:hover,
	.wp-block-navigation.is-style-pill .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
	.wp-block-navigation.is-style-pill .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--muted);
	}

	.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--muted);
	}

	.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--accent);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--background);
		border-color: var(--wp--preset--color--border);
	}
}

/* ==========================================================================
   Focus States - Accessibility
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--ring);
	outline-offset: 2px;
	border-radius: 2px;
}

.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible {
	outline-offset: 0;
}