/**
 * Rajgir Parent Theme
 *
 * Component CSS — Navigation
 *
 * Canonical path:
 * assets/css/components/navigation.css
 *
 * Navigation Architecture:
 *
 * GLOBAL
 *   ↓
 * CONTEXTUAL
 *   ↓
 * PORTAL
 *
 * Desktop:
 * Header + Navigation
 *
 * Mobile:
 * Header + Bottom Navigation
 *        +
 * Secondary Mobile Menu
 *
 * Responsibilities:
 * - Navigation component presentation.
 * - Primary navigation.
 * - Secondary navigation.
 * - Mobile navigation.
 * - Navigation states.
 * - Dropdown presentation foundation.
 * - Accessible focus presentation.
 *
 * This file does NOT:
 * - determine authorization;
 * - determine user permissions;
 * - query business data;
 * - implement business workflows;
 * - own navigation data;
 * - replace backend authorization;
 * - implement navigation JavaScript behavior.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. NAVIGATION FOUNDATION
   ========================================================================== */

nav {
	max-width: 100%;
}


/* ==========================================================================
   2. NAVIGATION LIST
   ========================================================================== */

.rg-navigation-list,
.rg-primary-navigation__list,
.rg-secondary-navigation__list,
.rg-mobile-navigation__list,
.rg-user-menu__links,
.rg-footer__navigation-list,
.rg-footer__secondary-list {
	list-style: none;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   3. NAVIGATION LINKS
   ========================================================================== */

.rg-primary-navigation a,
.rg-secondary-navigation a,
.rg-mobile-navigation a,
.rg-user-menu__links a,
.rg-footer__navigation a,
.rg-footer__secondary-navigation a {
	color:
		var(--rajgir-color-text);

	text-decoration: none;

	font-family:
		var(--rajgir-font-family-ui);

	line-height:
		var(--rajgir-line-height-ui);
}


/* ==========================================================================
   4. PRIMARY NAVIGATION
   ========================================================================== */

.rg-primary-navigation {
	display: flex;

	align-items: center;

	min-width: 0;
}


/* ==========================================================================
   5. PRIMARY NAVIGATION LIST
   ========================================================================== */

.rg-primary-navigation__list {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-navigation-gap);

	margin: 0;
	padding: 0;

	list-style: none;
}


/* ==========================================================================
   6. PRIMARY NAVIGATION ITEM
   ========================================================================== */

.rg-primary-navigation__list > li {
	position: relative;
}


/* ==========================================================================
   7. PRIMARY NAVIGATION LINK
   ========================================================================== */

.rg-primary-navigation__list > li > a {
	display: inline-flex;

	align-items: center;

	min-height:
		var(--rajgir-navigation-min-height);

	padding:
		var(--rajgir-space-navigation-block)
		var(--rajgir-space-navigation-inline);

	color:
		var(--rajgir-color-text);

	font-size:
		var(--rajgir-font-size-navigation);

	font-weight:
		var(--rajgir-font-weight-medium);

	line-height:
		var(--rajgir-line-height-ui);

	white-space: nowrap;
}


/* ==========================================================================
   8. PRIMARY NAVIGATION LINK — HOVER
   ========================================================================== */

.rg-primary-navigation__list > li > a:hover {
	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   9. PRIMARY NAVIGATION LINK — FOCUS
   ========================================================================== */

.rg-primary-navigation__list > li > a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   10. ACTIVE NAVIGATION
   ========================================================================== */

.rg-primary-navigation__list > li.current-menu-item > a,
.rg-primary-navigation__list > li.current-menu-ancestor > a,
.rg-primary-navigation__list > li.current-menu-parent > a {
	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);
}


/* ==========================================================================
   11. ACTIVE NAVIGATION INDICATOR
   ========================================================================== */

.rg-primary-navigation__list > li.current-menu-item > a::after,
.rg-primary-navigation__list > li.current-menu-ancestor > a::after,
.rg-primary-navigation__list > li.current-menu-parent > a::after {
	content: "";

	display: block;

	width:
		var(--rajgir-navigation-active-indicator-width);

	height:
		var(--rajgir-navigation-active-indicator-height);

	margin-top:
		var(--rajgir-space-navigation-indicator-gap);

	background:
		var(--rajgir-color-primary);

	border-radius:
		var(--rajgir-radius-pill);
}


/*
 * Active state is intentionally not communicated by color alone.
 *
 * The semantic WordPress menu state remains available through the
 * current-menu-* classes.
 */


/* ==========================================================================
   12. SECONDARY NAVIGATION
   ========================================================================== */

.rg-secondary-navigation {
	display: flex;

	align-items: center;

	min-width: 0;
}


/* ==========================================================================
   13. SECONDARY NAVIGATION LIST
   ========================================================================== */

.rg-secondary-navigation__list {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-navigation-gap);

	margin: 0;
	padding: 0;

	list-style: none;
}


/* ==========================================================================
   14. SECONDARY NAVIGATION LINK
   ========================================================================== */

.rg-secondary-navigation__list a {
	display: inline-flex;

	align-items: center;

	min-height:
		var(--rajgir-navigation-min-height);

	padding:
		var(--rajgir-space-navigation-block)
		var(--rajgir-space-navigation-inline);

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-navigation);

	font-weight:
		var(--rajgir-font-weight-medium);
}


/* ==========================================================================
   15. SECONDARY NAVIGATION HOVER
   ========================================================================== */

.rg-secondary-navigation__list a:hover {
	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   16. SECONDARY NAVIGATION FOCUS
   ========================================================================== */

.rg-secondary-navigation__list a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   17. USER MENU
   ========================================================================== */

.rg-user-menu {
	position: relative;
}


/* ==========================================================================
   18. USER MENU DETAILS
   ========================================================================== */

.rg-user-menu > details {
	position: relative;
}


/* ==========================================================================
   19. USER MENU SUMMARY
   ========================================================================== */

.rg-user-menu summary {
	cursor: pointer;

	list-style: none;
}


/* ==========================================================================
   20. REMOVE DEFAULT SUMMARY MARKER
   ========================================================================== */

.rg-user-menu summary::-webkit-details-marker {
	display: none;
}


/* ==========================================================================
   21. USER MENU LINKS
   ========================================================================== */

.rg-user-menu__links {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-navigation-item-gap);
}


/* ==========================================================================
   22. USER MENU LINK
   ========================================================================== */

.rg-user-menu__links a {
	display: block;

	padding:
		var(--rajgir-space-navigation-item-block)
		var(--rajgir-space-navigation-item-inline);
}


/* ==========================================================================
   23. USER MENU LINK — HOVER
   ========================================================================== */

.rg-user-menu__links a:hover {
	background:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   24. USER MENU LINK — FOCUS
   ========================================================================== */

.rg-user-menu__links a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		-2px;
}


/* ==========================================================================
   25. USER MENU LOGOUT
   ========================================================================== */

.rg-user-menu__logout {
	display: block;

	padding:
		var(--rajgir-space-navigation-item-block)
		var(--rajgir-space-navigation-item-inline);

	color:
		var(--rajgir-color-error);

	text-decoration: none;
}


/* ==========================================================================
   26. USER MENU LOGOUT — HOVER
   ========================================================================== */

.rg-user-menu__logout:hover {
	background:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-error-hover);
}


/* ==========================================================================
   27. USER MENU LOGOUT — FOCUS
   ========================================================================== */

.rg-user-menu__logout:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		-2px;
}


/* ==========================================================================
   28. MOBILE NAVIGATION
   ========================================================================== */

.rg-mobile-navigation {
	position: relative;

	width: 100%;
}


/* ==========================================================================
   29. MOBILE NAVIGATION TRIGGER
   ========================================================================== */

.rg-mobile-navigation__trigger {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width:
		var(--rajgir-button-icon-size);

	min-height:
		var(--rajgir-button-icon-size);

	padding:
		var(--rajgir-space-navigation-trigger);

	cursor: pointer;

	color:
		var(--rajgir-color-text);

	background:
		transparent;

	border:
		0;

	border-radius:
		var(--rajgir-radius-control);
}


/* ==========================================================================
   30. MOBILE NAVIGATION TRIGGER — HOVER
   ========================================================================== */

.rg-mobile-navigation__trigger:hover {
	background:
		var(--rajgir-color-surface-hover);
}


/* ==========================================================================
   31. MOBILE NAVIGATION TRIGGER — FOCUS
   ========================================================================== */

.rg-mobile-navigation__trigger:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   32. MOBILE NAVIGATION ICON
   ========================================================================== */

.rg-mobile-navigation__icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	font-size:
		var(--rajgir-font-size-icon);
}


/* ==========================================================================
   33. MOBILE NAVIGATION PANEL
   ========================================================================== */

.rg-mobile-navigation__panel {
	width: 100%;

	padding:
		var(--rajgir-space-navigation-panel);

	background:
		var(--rajgir-color-surface);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-panel);

	box-shadow:
		var(--rajgir-shadow-overlay);
}


/* ==========================================================================
   34. MOBILE NAVIGATION LIST
   ========================================================================== */

.rg-mobile-navigation__list {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-navigation-item-gap);
}


/* ==========================================================================
   35. MOBILE NAVIGATION ITEM
   ========================================================================== */

.rg-mobile-navigation__list > li {
	width: 100%;
}


/* ==========================================================================
   36. MOBILE NAVIGATION LINK
   ========================================================================== */

.rg-mobile-navigation__list > li > a {
	display: flex;

	align-items: center;

	width: 100%;

	min-height:
		var(--rajgir-navigation-mobile-min-height);

	padding:
		var(--rajgir-space-navigation-mobile-block)
		var(--rajgir-space-navigation-mobile-inline);

	color:
		var(--rajgir-color-text);

	font-size:
		var(--rajgir-font-size-navigation);

	font-weight:
		var(--rajgir-font-weight-medium);
}


/* ==========================================================================
   37. MOBILE NAVIGATION LINK — HOVER
   ========================================================================== */

.rg-mobile-navigation__list > li > a:hover {
	background:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   38. MOBILE NAVIGATION LINK — FOCUS
   ========================================================================== */

.rg-mobile-navigation__list > li > a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		-2px;
}


/* ==========================================================================
   39. MOBILE ACTIVE NAVIGATION
   ========================================================================== */

.rg-mobile-navigation__list > li.current-menu-item > a,
.rg-mobile-navigation__list > li.current-menu-ancestor > a,
.rg-mobile-navigation__list > li.current-menu-parent > a {
	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);

	background:
		var(--rajgir-color-surface-selected);
}


/* ==========================================================================
   40. MOBILE ACTIVE INDICATOR
   ========================================================================== */

.rg-mobile-navigation__list > li.current-menu-item > a::before,
.rg-mobile-navigation__list > li.current-menu-ancestor > a::before,
.rg-mobile-navigation__list > li.current-menu-parent > a::before {
	content: "";

	width:
		var(--rajgir-navigation-active-indicator-width);

	height:
		var(--rajgir-navigation-active-indicator-height);

	margin-right:
		var(--rajgir-space-navigation-indicator-gap);

	background:
		var(--rajgir-color-primary);

	border-radius:
		var(--rajgir-radius-pill);

	flex: 0 0 auto;
}


/* ==========================================================================
   41. SUBMENU
   ========================================================================== */

.rg-primary-navigation ul ul,
.rg-secondary-navigation ul ul,
.rg-mobile-navigation ul ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


/* ==========================================================================
   42. SUBMENU DESKTOP FOUNDATION
   ========================================================================== */

.rg-primary-navigation li.menu-item-has-children > ul,
.rg-secondary-navigation li.menu-item-has-children > ul {
	position: absolute;

	top: 100%;
	left: 0;

	min-width:
		var(--rajgir-navigation-dropdown-min-width);

	padding:
		var(--rajgir-space-navigation-panel);

	background:
		var(--rajgir-color-surface);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-panel);

	box-shadow:
		var(--rajgir-shadow-dropdown);

	z-index:
		var(--rajgir-layer-dropdown);

	visibility: hidden;
	opacity: 0;

	pointer-events: none;

	transition:
		var(--rajgir-motion-transition-fast);
}


/* ==========================================================================
   43. SUBMENU DESKTOP — OPEN
   ========================================================================== */

.rg-primary-navigation li.menu-item-has-children:hover > ul,
.rg-primary-navigation li.menu-item-has-children:focus-within > ul,
.rg-secondary-navigation li.menu-item-has-children:hover > ul,
.rg-secondary-navigation li.menu-item-has-children:focus-within > ul {
	visibility: visible;

	opacity: 1;

	pointer-events: auto;
}


/*
 * :focus-within ensures keyboard focus can expose the submenu.
 *
 * JavaScript is not required merely to reveal a CSS-supported submenu.
 */


/* ==========================================================================
   44. SUBMENU LINK
   ========================================================================== */

.rg-primary-navigation ul ul a,
.rg-secondary-navigation ul ul a {
	display: flex;

	align-items: center;

	width: 100%;

	min-height:
		var(--rajgir-navigation-submenu-min-height);

	padding:
		var(--rajgir-space-navigation-item-block)
		var(--rajgir-space-navigation-item-inline);

	color:
		var(--rajgir-color-text);

	white-space: nowrap;
}


/* ==========================================================================
   45. SUBMENU LINK — HOVER
   ========================================================================== */

.rg-primary-navigation ul ul a:hover,
.rg-secondary-navigation ul ul a:hover {
	background:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   46. SUBMENU LINK — FOCUS
   ========================================================================== */

.rg-primary-navigation ul ul a:focus-visible,
.rg-secondary-navigation ul ul a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		-2px;
}


/* ==========================================================================
   47. MENU ITEM WITH CHILDREN
   ========================================================================== */

.rg-primary-navigation li.menu-item-has-children > a,
.rg-secondary-navigation li.menu-item-has-children > a {
	display: inline-flex;

	align-items: center;

	gap:
		var(--rajgir-space-icon-gap);
}


/* ==========================================================================
   48. MOBILE SUBMENU
   ========================================================================== */

.rg-mobile-navigation li.menu-item-has-children > ul {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-navigation-item-gap);

	margin-top:
		var(--rajgir-space-navigation-item-gap);

	padding-left:
		var(--rajgir-space-navigation-submenu-indent);
}


/* ==========================================================================
   49. MOBILE SUBMENU LINK
   ========================================================================== */

.rg-mobile-navigation li.menu-item-has-children > ul a {
	display: flex;

	align-items: center;

	min-height:
		var(--rajgir-navigation-submenu-min-height);

	padding:
		var(--rajgir-space-navigation-item-block)
		var(--rajgir-space-navigation-item-inline);

	color:
		var(--rajgir-color-text-muted);
}


/* ==========================================================================
   50. MOBILE SUBMENU LINK — HOVER
   ========================================================================== */

.rg-mobile-navigation li.menu-item-has-children > ul a:hover {
	color:
		var(--rajgir-color-primary);

	background:
		var(--rajgir-color-surface-hover);
}


/* ==========================================================================
   51. MOBILE SUBMENU LINK — FOCUS
   ========================================================================== */

.rg-mobile-navigation li.menu-item-has-children > ul a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		-2px;
}


/* ==========================================================================
   52. NAVIGATION CURRENT STATE
   ========================================================================== */

.current-menu-item > a,
.current-menu-ancestor > a,
.current-menu-parent > a {
	/*
	 * Current-state presentation is intentionally shared.
	 *
	 * Component-specific styling may refine this.
	 */
}


/* ==========================================================================
   53. NAVIGATION ARIA STATE
   ========================================================================== */

[aria-current="page"],
[aria-current="true"] {
	font-weight:
		var(--rajgir-font-weight-semibold);
}


/* ==========================================================================
   54. EXPANDED STATE
   ========================================================================== */

[aria-expanded="true"] {
	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   55. COLLAPSED STATE
   ========================================================================== */

[aria-expanded="false"] {
	color:
		var(--rajgir-color-text);
}


/* ==========================================================================
   56. NAVIGATION VISIBILITY
   ========================================================================== */

/*
 * Visibility of a navigation item is not proof of authorization.
 *
 * Backend authorization remains authoritative.
 */


/* ==========================================================================
   57. CRAWLABLE PUBLIC NAVIGATION
   ========================================================================== */

/*
 * Public location-changing navigation should remain ordinary links:
 *
 * <a href="...">
 *
 * JavaScript must enhance rather than replace the semantic baseline.
 */


/* ==========================================================================
   58. ACTION VS NAVIGATION
   ========================================================================== */

/*
 * Location change:
 *
 *     <a>
 *
 * UI action:
 *
 *     <button>
 *
 * The navigation component must preserve this distinction.
 */


/* ==========================================================================
   59. MOBILE BOTTOM NAVIGATION FOUNDATION
   ========================================================================== */

/*
 * A future bottom-navigation component may consume:
 *
 * --rajgir-layer-sticky
 *
 * and approved spacing/safe-area tokens.
 *
 * The exact final bottom-navigation tab count is NOT defined here.
 */


/* ==========================================================================
   60. SAFE AREA
   ========================================================================== */

.rg-mobile-bottom-navigation {
	padding-bottom:
		env(
			safe-area-inset-bottom,
			0px
		);
}


/* ==========================================================================
   61. BOTTOM NAVIGATION CONTENT SAFETY
   ========================================================================== */

.rg-mobile-bottom-navigation {
	width: 100%;
}


/*
 * Fixed navigation must not obscure page content.
 *
 * Any required content offset belongs to the appropriate layout layer,
 * not to arbitrary navigation heights here.
 */


/* ==========================================================================
   62. STICKY NAVIGATION
   ========================================================================== */

.rg-sticky-navigation {
	position: sticky;

	top: 0;

	z-index:
		var(--rajgir-layer-sticky);
}


/* ==========================================================================
   63. NAVIGATION PERFORMANCE
   ========================================================================== */

/*
 * No continuous animation.
 *
 * No polling.
 *
 * No resize listeners.
 *
 * No unnecessary JavaScript.
 *
 * Navigation presentation should remain lightweight.
 */


/* ==========================================================================
   64. NAVIGATION MOTION
   ========================================================================== */

.rg-primary-navigation li.menu-item-has-children > ul,
.rg-secondary-navigation li.menu-item-has-children > ul {
	transition:
		var(--rajgir-motion-transition-fast);
}


/* ==========================================================================
   65. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rg-primary-navigation li.menu-item-has-children > ul,
	.rg-secondary-navigation li.menu-item-has-children > ul {
		transition: none;
	}

}


/* ==========================================================================
   66. NAVIGATION WRAPPING
   ========================================================================== */

.rg-primary-navigation__list,
.rg-secondary-navigation__list {
	max-width: 100%;
}


/* ==========================================================================
   67. NO UNCONTROLLED HORIZONTAL SCROLL
   ========================================================================== */

.rg-primary-navigation,
.rg-secondary-navigation,
.rg-mobile-navigation {
	max-width: 100%;
}


/* ==========================================================================
   68. NAVIGATION ACCESSIBILITY
   ========================================================================== */

/*
 * Navigation must preserve:
 *
 * - semantic <nav>;
 * - semantic <a>;
 * - keyboard focus;
 * - understandable labels;
 * - current destination;
 * - touch usability;
 * - readable content;
 * - predictable interaction.
 */


/* ==========================================================================
   69. NAVIGATION SECURITY BOUNDARY
   ========================================================================== */

/*
 * Navigation visibility:
 *
 * UI
 *   ↓
 * Representation
 *
 * Authorization:
 *
 * API
 *   ↓
 * Backend
 *
 * Navigation CSS must never be treated as a permission system.
 */


/* ==========================================================================
   70. NAVIGATION COMPONENT BOUNDARY
   ========================================================================== */

/*
 * This file owns:
 *
 *     Navigation presentation
 *
 * Header layout:
 *
 *     assets/css/layouts/header.css
 *
 * Mobile layout:
 *
 *     assets/css/responsive/mobile.css
 *
 * Navigation interaction:
 *
 *     assets/js/components/navigation.js
 *
 * Page-specific orchestration:
 *
 *     assets/js/pages/
 *
 * Business/domain authority:
 *
 *     Approved application/module layer
 */


/* ==========================================================================
   71. NO COMPETING NAVIGATION SYSTEMS
   ========================================================================== */

/*
 * Global Navigation
 *        +
 * Contextual Navigation
 *        +
 * Portal Navigation
 *
 * must remain conceptually distinct.
 *
 * Avoid duplicating the same navigation destination across multiple
 * competing surfaces without a clear UX reason.
 */


/* ==========================================================================
   72. NAVIGATION DEPTH
   ========================================================================== */

/*
 * The source does not lock a universal numeric maximum depth.
 *
 * Therefore this component does not impose an artificial depth number.
 *
 * Frequently used destinations should remain appropriately discoverable.
 */


/* ==========================================================================
   73. NAVIGATION LABELS
   ========================================================================== */

/*
 * Labels should remain:
 *
 * - understandable;
 * - consistent;
 * - localized where applicable;
 * - user-oriented.
 *
 * Technical module names must not become user-facing information
 * architecture merely because they exist internally.
 */


/* ==========================================================================
   74. FUTURE APP COMPATIBILITY
   ========================================================================== */

/*
 * Navigation presentation remains compatible with:
 *
 * Web
 * PWA
 * Native App reuse
 *
 * through:
 *
 * REST API
 * +
 * Design Tokens
 * +
 * UX Patterns
 *
 * CSS does not own the API.
 */


/* ==========================================================================
   75. FINAL COMPONENT BOUNDARY
   ========================================================================== */

/*
 * Navigation
 *     ↓
 * Discover
 *     ↓
 * Understand
 *     ↓
 * Move
 *     ↓
 * Act
 *     ↓
 * Return
 *
 * Navigation remains simple, predictable, consistent, accessible,
 * responsive, scalable, fast and secure.
 */