/**
 * Rajgir Parent Theme
 *
 * Layout CSS — Global Header
 *
 * Canonical path:
 * assets/css/layouts/header.css
 *
 * HTML owner:
 * template-parts/header/site-header.php
 *
 * Responsibility:
 * - Global header layout
 * - Header positioning
 * - Header inner alignment
 * - Header regions
 * - Header responsive layout
 * - Header layout stability
 *
 * NOT responsible for:
 * - Navigation behavior
 * - Authentication
 * - Authorization
 * - Search engine logic
 * - Business logic
 * - User data
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. GLOBAL HEADER
   ========================================================================== */

.rg-header {
	position: relative;

	width: 100%;

	margin: 0;

	padding: 0;

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

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

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

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


/* ==========================================================================
   2. HEADER INNER
   ========================================================================== */

.rg-header__inner {
	display: flex;

	align-items: center;

	width: 100%;

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

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


/*
 * .rg-container owns the global horizontal container behavior.
 *
 * header.css must not duplicate the container's max-width system.
 */


/* ==========================================================================
   3. HEADER BRAND REGION
   ========================================================================== */

.rg-header__brand {
	display: flex;

	align-items: center;

	flex:
		0 0 auto;

	min-width: 0;
}


/* ==========================================================================
   4. BRAND
   ========================================================================== */

.rg-brand {
	display: inline-flex;

	align-items: center;

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

	min-width: 0;

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

	text-decoration: none;
}


/* ==========================================================================
   5. BRAND MARK
   ========================================================================== */

.rg-brand__mark {
	display: inline-flex;

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

	flex:
		0 0 auto;

	width:
		var(--rajgir-brand-mark-size);

	height:
		var(--rajgir-brand-mark-size);

	border-radius:
		var(--rajgir-radius-brand-mark);

	background:
		var(--rajgir-color-brand-mark);
}


/* ==========================================================================
   6. BRAND MARK INNER
   ========================================================================== */

.rg-brand__mark-inner {
	display: block;

	width:
		var(--rajgir-brand-mark-inner-size);

	height:
		var(--rajgir-brand-mark-inner-size);

	border-radius:
		var(--rajgir-radius-brand-mark-inner);

	background:
		var(--rajgir-color-brand-mark-inner);
}


/* ==========================================================================
   7. BRAND NAME
   ========================================================================== */

.rg-brand__name {
	display: block;

	min-width: 0;

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

	font-family:
		var(--rajgir-type-brand-font-family);

	font-size:
		var(--rajgir-type-brand-font-size);

	font-weight:
		var(--rajgir-type-brand-font-weight);

	line-height:
		var(--rajgir-type-brand-line-height);

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;
}


/* ==========================================================================
   8. BRAND FOCUS
   ========================================================================== */

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

	outline-offset:
		3px;

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


/* ==========================================================================
   9. PRIMARY NAVIGATION REGION
   ========================================================================== */

.rg-primary-navigation {
	display: flex;

	align-items: center;

	min-width: 0;

	flex:
		1 1 auto;
}


/*
 * Navigation visual rules remain owned by:
 *
 * assets/css/components/navigation.css
 */


/* ==========================================================================
   10. PRIMARY NAVIGATION LIST
   ========================================================================== */

.rg-primary-navigation__list {
	min-width: 0;
}


/*
 * Header layout does not redesign the navigation list.
 */


/* ==========================================================================
   11. HEADER SEARCH REGION
   ========================================================================== */

.rg-header__search {
	display: flex;

	align-items: center;

	flex:
		0 1 var(--rajgir-header-search-width);

	min-width:
		var(--rajgir-header-search-min-width);
}


/* ==========================================================================
   12. HEADER SEARCH FORM
   ========================================================================== */

.rg-header__search .rg-search-form {
	width: 100%;
}


/*
 * Search component styling remains with the appropriate component CSS.
 */


/* ==========================================================================
   13. HEADER USER REGION
   ========================================================================== */

.rg-header__user {
	display: flex;

	align-items: center;

	justify-content: flex-end;

	flex:
		0 0 auto;

	min-width: 0;
}


/* ==========================================================================
   14. USER MENU
   ========================================================================== */

.rg-user-menu {
	position: relative;

	display: block;
}


/* ==========================================================================
   15. USER MENU TRIGGER
   ========================================================================== */

.rg-user-menu__trigger {
	display: inline-flex;

	align-items: center;

	justify-content: center;

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

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

	border:
		1px solid transparent;

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

	background:
		transparent;

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

	cursor: pointer;

	list-style: none;
}


/* ==========================================================================
   16. USER MENU TRIGGER MARKER
   ========================================================================== */

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


/* ==========================================================================
   17. USER MENU TRIGGER HOVER
   ========================================================================== */

.rg-user-menu__trigger:hover {
	background:
		var(--rajgir-color-header-hover);

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


/* ==========================================================================
   18. USER MENU TRIGGER FOCUS
   ========================================================================== */

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

	outline-offset:
		2px;
}


/* ==========================================================================
   19. USER MENU CONTENT
   ========================================================================== */

.rg-user-menu__content {
	position: absolute;

	top:
		calc(
			100%
			+
			var(--rajgir-space-header-menu-offset)
		);

	right: 0;

	min-width:
		var(--rajgir-user-menu-min-width);

	max-width:
		var(--rajgir-user-menu-max-width);

	padding:
		var(--rajgir-space-user-menu);

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

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

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

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

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


/*
 * Authentication/authorization decisions remain outside this CSS.
 */


/* ==========================================================================
   20. MOBILE NAVIGATION REGION
   ========================================================================== */

.rg-mobile-navigation {
	display: none;

	flex:
		0 0 auto;
}


/*
 * Mobile navigation behavior/presentation may additionally consume:
 *
 * components/navigation.css
 */


/* ==========================================================================
   21. HEADER ACTIONS
   ========================================================================== */

.rg-header__actions {
	display: flex;

	align-items: center;

	justify-content: flex-end;

	flex:
		0 0 auto;

	gap:
		var(--rajgir-space-header-action-gap);
}


/* ==========================================================================
   22. HEADER ACTION
   ========================================================================== */

.rg-header__action {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	flex:
		0 0 auto;
}


/* ==========================================================================
   23. HEADER ICON
   ========================================================================== */

.rg-header__icon {
	display: inline-flex;

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

	width:
		var(--rajgir-size-icon-md);

	height:
		var(--rajgir-size-icon-md);

	flex:
		0 0 auto;
}


/* ==========================================================================
   24. HEADER LINKS
   ========================================================================== */

.rg-header a {
	color:
		inherit;
}


/* ==========================================================================
   25. HEADER LINK FOCUS
   ========================================================================== */

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

	outline-offset:
		2px;
}


/* ==========================================================================
   26. HEADER INPUT STABILITY
   ========================================================================== */

.rg-header input,
.rg-header select,
.rg-header button {
	font: inherit;
}


/*
 * Detailed form/button styling belongs to:
 *
 * components/forms.css
 * components/buttons.css
 */


/* ==========================================================================
   27. HEADER SEARCH FIELD COMPATIBILITY
   ========================================================================== */

.rg-header .rg-search-form__field {
	width: 100%;
}


/* ==========================================================================
   28. HEADER SEARCH INPUT COMPATIBILITY
   ========================================================================== */

.rg-header .rg-search-form__input {
	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   29. HEADER CONTENT STABILITY
   ========================================================================== */

.rg-header__inner > * {
	min-width: 0;
}


/*
 * Prevent unexpectedly wide child content from breaking the global
 * header layout.
 */


/* ==========================================================================
   30. HEADER BRAND STABILITY
   ========================================================================== */

.rg-header__brand,
.rg-brand {
	min-width: 0;
}


/* ==========================================================================
   31. HEADER SEARCH STABILITY
   ========================================================================== */

.rg-header__search {
	min-width: 0;
}


/* ==========================================================================
   32. HEADER DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-header__inner {
		flex-wrap: nowrap;
	}

	.rg-primary-navigation {
		display: flex;
	}

	.rg-mobile-navigation {
		display: none;
	}

}


/* ==========================================================================
   33. HEADER TABLET
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	.rg-header__inner {
		flex-wrap: nowrap;
	}

	.rg-header__search {
		flex-basis:
			var(--rajgir-header-search-tablet-width);
	}

	.rg-primary-navigation {
		flex:
			1 1 auto;
	}

	.rg-mobile-navigation {
		display: none;
	}

}


/*
 * Exact breakpoint governance remains subject to the approved
 * responsive architecture.
 */


/* ==========================================================================
   34. HEADER MOBILE
   ========================================================================== */

@media (max-width: 767px) {

	.rg-header__inner {
		min-height:
			var(--rajgir-header-mobile-min-height);

		flex-wrap: nowrap;

		gap:
			var(--rajgir-space-header-mobile-gap);
	}

	.rg-header__brand {
		flex:
			1 1 auto;
	}

	.rg-brand__name {
		max-width:
			var(--rajgir-mobile-brand-name-max-width);
	}

	.rg-primary-navigation {
		display: none;
	}

	.rg-header__search {
		display: none;
	}

	.rg-mobile-navigation {
		display: flex;
	}

	.rg-header__user {
		flex:
			0 0 auto;
	}

}


/* ==========================================================================
   35. MOBILE HEADER IMPORTANT CONTROLS
   ========================================================================== */

/*
 * Source-defined mobile header priorities include:
 *
 * Menu
 * Logo
 * Search
 * Profile
 *
 * Exact arrangement belongs to the navigation/component contract.
 */


/* ==========================================================================
   36. MOBILE HEADER ACTIONS
   ========================================================================== */

@media (max-width: 767px) {

	.rg-header__actions {
		gap:
			var(--rajgir-space-header-mobile-action-gap);
	}

}


/* ==========================================================================
   37. LARGE SCREEN
   ========================================================================== */

@media (min-width: 1280px) {

	.rg-header__inner {
		gap:
			var(--rajgir-space-header-large-gap);
	}

}


/* ==========================================================================
   38. STICKY HEADER
   ========================================================================== */

/*
 * Sticky header is optional.
 *
 * It must not be enabled globally unless the approved implementation
 * requires it.
 *
 * Example modifier:
 *
 * .rg-header--sticky
 */

.rg-header--sticky {
	position: sticky;

	top: 0;
}


/* ==========================================================================
   39. STICKY HEADER CONTENT OFFSET
   ========================================================================== */

/*
 * If sticky behavior is enabled, the surrounding layout must ensure
 * that important page content is not obscured.
 *
 * This file does not blindly add arbitrary page padding.
 */


/* ==========================================================================
   40. FIXED HEADER
   ========================================================================== */

/*
 * Fixed header is NOT the default.
 *
 * Do not apply:
 *
 * position: fixed;
 *
 * globally.
 *
 * If an approved implementation requires a fixed header, viewport,
 * content offset, mobile browser behavior and accessibility must be
 * reviewed.
 */


/* ==========================================================================
   41. HEADER BORDER
   ========================================================================== */

.rg-header {
	box-sizing: border-box;
}


/* ==========================================================================
   42. HEADER CHILD BOX SIZING
   ========================================================================== */

.rg-header *,
.rg-header *::before,
.rg-header *::after {
	box-sizing: border-box;
}


/* ==========================================================================
   43. HEADER OVERFLOW SAFETY
   ========================================================================== */

.rg-header,
.rg-header__inner {
	max-width: 100%;
}


/* ==========================================================================
   44. HEADER TEXT OVERFLOW
   ========================================================================== */

.rg-header__brand,
.rg-header__search,
.rg-header__user,
.rg-primary-navigation {
	overflow-wrap: break-word;
}


/* ==========================================================================
   45. HEADER VISUAL SIMPLICITY
   ========================================================================== */

/*
 * Universal Header principle:
 *
 * Feature-rich
 * +
 * Visually simple
 *
 * Do not add visual decoration merely because a header has available
 * space.
 */


/* ==========================================================================
   46. HEADER PERFORMANCE
   ========================================================================== */

/*
 * Header is a global surface.
 *
 * Avoid:
 *
 * - heavy visual effects;
 * - unnecessary images;
 * - unnecessary font dependencies;
 * - large CSS dependencies;
 * - unnecessary animation.
 */


/* ==========================================================================
   47. HEADER MOTION
   ========================================================================== */

.rg-header,
.rg-header__inner,
.rg-header__action,
.rg-user-menu__trigger {
	transition:
		var(--rajgir-motion-transition-fast);
}


/* ==========================================================================
   48. REDUCED MOTION
   ========================================================================== */

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

	.rg-header,
	.rg-header__inner,
	.rg-header__action,
	.rg-user-menu__trigger {
		transition: none;
	}

}


/* ==========================================================================
   49. HEADER ACCESSIBILITY
   ========================================================================== */

/*
 * Header must preserve:
 *
 * - logical reading order;
 * - keyboard navigation;
 * - visible focus;
 * - semantic structure;
 * - screen-reader usability.
 *
 * CSS must not visually reorder important controls in a way that
 * conflicts with logical reading order.
 */


/* ==========================================================================
   50. NO VISUAL ORDER HACK
   ========================================================================== */

/*
 * Avoid blindly using:
 *
 * order:
 *
 * to move semantically important header controls around.
 *
 * If visual and logical order differ, the semantic/accessibility
 * structure must be reviewed.
 */


/* ==========================================================================
   51. HEADER + CONTAINER
   ========================================================================== */

/*
 * Header:
 *
 * .rg-header
 *      ↓
 * .rg-header__inner
 *      ↓
 * .rg-container
 *
 * Container width/padding belongs to:
 *
 * assets/css/layouts/container.css
 */


/* ==========================================================================
   52. HEADER + NAVIGATION
   ========================================================================== */

/*
 * Header Layout
 *      ≠
 * Navigation Component
 *
 * header.css:
 *     placement / layout
 *
 * navigation.css:
 *     navigation presentation / interaction styling
 */


/* ==========================================================================
   53. HEADER + BUTTONS
   ========================================================================== */

/*
 * Header actions may consume:
 *
 * components/buttons.css
 *
 * Header does not create a separate button design system.
 */


/* ==========================================================================
   54. HEADER + FORMS
   ========================================================================== */

/*
 * Header search may consume:
 *
 * components/forms.css
 *
 * Header does not create a second form system.
 */


/* ==========================================================================
   55. HEADER + MEDIA
   ========================================================================== */

/*
 * Header brand/media may consume the common media architecture where
 * approved.
 *
 * Header does not own media processing or storage.
 */


/* ==========================================================================
   56. HEADER + USER AUTHORITY
   ========================================================================== */

/*
 * The presence of a user menu does NOT grant authentication authority.
 *
 * Authentication:
 *     external/auth architecture
 *
 * Authorization:
 *     backend/application authority
 *
 * Theme:
 *     presentation
 */


/* ==========================================================================
   57. HEADER + SEARCH AUTHORITY
   ========================================================================== */

/*
 * Search form presentation belongs to Theme.
 *
 * Search ranking/retrieval authority remains outside Theme.
 */


/* ==========================================================================
   58. HEADER + NOTIFICATION
   ========================================================================== */

/*
 * Notification presentation may be composed in the header where
 * approved.
 *
 * Notification generation/delivery authority does not belong to
 * header.css.
 */


/* ==========================================================================
   59. HEADER + RESPONSIVE ARCHITECTURE
   ========================================================================== */

/*
 * Progressive enhancement:
 *
 * Mobile
 *   ↓
 * Tablet
 *   ↓
 * Desktop
 *   ↓
 * Large Screen
 *
 * Exact breakpoint values must follow the approved responsive
 * architecture rather than being treated as constitutional constants.
 */


/* ==========================================================================
   60. HEADER STABILITY
   ========================================================================== */

/*
 * Header dimensions should remain predictable during initial rendering.
 *
 * Avoid late-loading visual elements that unexpectedly change the
 * header height where layout reservation is possible.
 */


/* ==========================================================================
   61. HEADER SEO
   ========================================================================== */

/*
 * Header must preserve crawlable public navigation and semantic
 * document structure.
 *
 * CSS must never hide primary public navigation in a way that makes
 * the public destination inaccessible to applicable clients.
 */


/* ==========================================================================
   62. HEADER COMPONENT BOUNDARY
   ========================================================================== */

/*
 * HEADER.CSS
 *     ↓
 * Layout
 *
 * NAVIGATION.CSS
 *     ↓
 * Navigation Component
 *
 * HEADER PHP TEMPLATE
 *     ↓
 * Semantic Composition
 *
 * JS
 *     ↓
 * Interaction Enhancement
 *
 * APPLICATION
 *     ↓
 * Business / Authentication / Authorization
 */


/* ==========================================================================
   63. FINAL HEADER RULE
   ========================================================================== */

/*
 * Universal Header
 *      +
 * Simple Presentation
 *      +
 * Responsive Layout
 *      +
 * Accessibility
 *      +
 * Performance
 *      +
 * Stable Rendering
 *
 * without absorbing Navigation, Search, Authentication or Business
 * authority.
 */