/**
 * Rajgir Parent Theme
 *
 * Layout CSS — Global Container
 *
 * Canonical path:
 * assets/css/layouts/container.css
 *
 * Primary namespace:
 * .rg-container
 *
 * Responsibility:
 * - Global content container
 * - Horizontal alignment
 * - Fluid width behavior
 * - Maximum content boundary
 * - Responsive container behavior
 *
 * Architecture:
 *
 * Full Width
 *     ↓
 * Max Width Container
 *     ↓
 * Content
 *
 * IMPORTANT:
 * Exact production max-width is NOT hard-coded here.
 * It is governed by the approved Design Token / Design System.
 *
 * @package Rajgir
 */

defined( 'ABSPATH' ) || exit;


/* ==========================================================================
   1. GLOBAL CONTAINER FOUNDATION
   ========================================================================== */

.rg-container {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);

	margin-right:
		auto;

	margin-left:
		auto;

	box-sizing:
		border-box;
}


/* ==========================================================================
   2. CONTAINER CHILD BOX SIZING
   ========================================================================== */

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


/* ==========================================================================
   3. CONTAINER WIDTH SAFETY
   ========================================================================== */

.rg-container {
	max-width:
		100%;
}


/* ==========================================================================
   4. CONTAINER CONTENT SAFETY
   ========================================================================== */

.rg-container > * {
	min-width:
		0;

	max-width:
		100%;
}


/* ==========================================================================
   5. FLUID CONTAINER PRINCIPLE
   ========================================================================== */

/*
 * Canonical model:
 *
 * Viewport
 *     ↓
 * Fluid Container
 *     ↓
 * Max Width
 *     ↓
 * Content
 *
 * Fixed-width layout is NOT the default responsive strategy.
 */


/* ==========================================================================
   6. MOBILE CONTAINER
   ========================================================================== */

@media (max-width: 767px) {

	.rg-container {
		width:
			min(
				100% - (2 * var(--rg-content-padding)),
				var(--rg-content-width)
			);
	}

}


/* ==========================================================================
   7. TABLET CONTAINER
   ========================================================================== */

@media (min-width: 768px) {

	.rg-container {
		width:
			min(
				100% - (2 * var(--rg-content-padding)),
				var(--rg-content-width)
			);
	}

}


/* ==========================================================================
   8. DESKTOP CONTAINER
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-container {
		width:
			min(
				100% - (2 * var(--rg-content-padding)),
				var(--rg-content-width)
			);
	}

}


/* ==========================================================================
   9. LARGE SCREEN CONTAINER
   ========================================================================== */

@media (min-width: 1200px) {

	.rg-container {
		width:
			min(
				100% - (2 * var(--rg-content-padding)),
				var(--rg-content-width)
			);
	}

}


/* ==========================================================================
   10. CONTAINER ALIGNMENT
   ========================================================================== */

/*
 * Major page sections should align to the same container edges wherever
 * logically applicable.
 *
 * Example:
 *
 * ┌─────────────────────────────────────────┐
 * │ Header                                  │
 * ├─────────────────────────────────────────┤
 * │        Content Container                │
 * │        ┌─────────────────────────┐      │
 * │        │ Heading                 │      │
 * │        │ Content                 │      │
 * │        └─────────────────────────┘      │
 * └─────────────────────────────────────────┘
 */


/* ==========================================================================
   11. AUTO MARGINS
   ========================================================================== */

.rg-container {
	margin-inline:
		auto;
}


/* ==========================================================================
   12. CONTAINER HORIZONTAL OVERFLOW SAFETY
   ========================================================================== */

.rg-container {
	overflow-wrap:
		break-word;
}


/* ==========================================================================
   13. NO UNINTENDED HORIZONTAL SCROLL
   ========================================================================== */

/*
 * The container itself must not create unintended horizontal scrolling.
 *
 * Child components remain responsible for handling their own content
 * overflow appropriately.
 */


/* ==========================================================================
   14. FULL-WIDTH SURFACE
   ========================================================================== */

/*
 * Not every visual surface must be constrained.
 *
 * Full-width may be appropriate for:
 *
 * - Hero background
 * - Full-width section
 * - Navigation surface
 * - Media/banner
 *
 * Meaningful content commonly remains inside .rg-container.
 */


/* ==========================================================================
   15. FULL-WIDTH + CONTAINER PATTERN
   ========================================================================== */

.rg-container-wrap {
	width:
		100%;
}


/* ==========================================================================
   16. FULL-WIDTH INNER CONTENT
   ========================================================================== */

.rg-container-wrap > .rg-container {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);
}


/* ==========================================================================
   17. NESTED CONTAINER PROTECTION
   ========================================================================== */

/*
 * Avoid unnecessary:
 *
 * Container
 *     ↓
 * Container
 *         ↓
 * Container
 *
 * Nested containers should only be used where there is a real
 * content/layout boundary.
 */


/* ==========================================================================
   18. NESTED CONTAINER
   ========================================================================== */

/*
 * No special negative margin or width hack is introduced for nested
 * containers.
 *
 * Real nested boundaries must be explicitly designed by the owning
 * layout/pattern.
 */


/* ==========================================================================
   19. MAIN CONTENT + OPTIONAL SIDEBAR
   ========================================================================== */

/*
 * Canonical desktop structure:
 *
 * .rg-container
 *     │
 *     ├── Main Content
 *     │
 *     └── Optional Sidebar
 *
 * The actual two-dimensional page composition belongs to:
 *
 * assets/css/layouts/page-layout.css
 */


/* ==========================================================================
   20. CONTAINER DOES NOT OWN SIDEBAR
   ========================================================================== */

/*
 * container.css
 *     =
 * Global width/alignment
 *
 * sidebar.css
 *     =
 * Sidebar presentation
 *
 * page-layout.css
 *     =
 * Main + Sidebar composition
 */


/* ==========================================================================
   21. CONTAINER + HEADER
   ========================================================================== */

.rg-header .rg-container,
.rg-header__inner.rg-container {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);

	margin-inline:
		auto;
}


/* ==========================================================================
   22. CONTAINER + FOOTER
   ========================================================================== */

.rg-footer .rg-container,
.rg-footer__inner.rg-container {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);

	margin-inline:
		auto;
}


/* ==========================================================================
   23. CONTENT WIDTH TOKEN
   ========================================================================== */

/*
 * --rg-content-width is the authoritative width token.
 *
 * This file does NOT invent its numeric value.
 *
 * The value must be supplied by the approved Design Token / Design
 * System layer.
 */


/* ==========================================================================
   24. CONTENT PADDING TOKEN
   ========================================================================== */

/*
 * --rg-content-padding is the authoritative horizontal spacing token.
 *
 * It is intentionally not replaced with arbitrary page-specific values.
 */


/* ==========================================================================
   25. TOKEN FALLBACK BOUNDARY
   ========================================================================== */

/*
 * No arbitrary fallback max-width is introduced here.
 *
 * If the required token is missing, the implementation must be
 * corrected at the Design Token / Theme integration layer rather
 * than silently inventing a new global width.
 */


/* ==========================================================================
   26. RESPONSIVE PADDING
   ========================================================================== */

/*
 * Responsive content padding is governed by the existing approved
 * token system.
 *
 * This file consumes the token rather than creating a second spacing
 * scale.
 */


/* ==========================================================================
   27. MOBILE-FIRST BEHAVIOR
   ========================================================================== */

/*
 * Canonical responsive flow:
 *
 * Mobile
 *     ↓
 * Tablet
 *     ↓
 * Desktop
 *     ↓
 * Large Screen
 *
 * Mobile is not merely a compressed desktop layout.
 */


/* ==========================================================================
   28. LARGE SCREEN PRINCIPLE
   ========================================================================== */

/*
 * More screen
 *     ≠
 * Endless content width
 *
 * Large screens should improve:
 *
 * - whitespace
 * - hierarchy
 * - sidebar/context
 * - media
 * - grid composition
 *
 * while preserving the maximum content boundary.
 */


/* ==========================================================================
   29. CONTAINER + GRID
   ========================================================================== */

.rg-container > .rg-grid {
	min-width:
		0;

	max-width:
		100%;
}


/*
 * Grid implementation belongs to the appropriate layout/pattern layer.
 */


/* ==========================================================================
   30. CONTAINER + FLEX
   ========================================================================== */

.rg-container > .rg-flex {
	min-width:
		0;

	max-width:
		100%;
}


/*
 * Flex alignment belongs to the owning layout/component.
 */


/* ==========================================================================
   31. CONTAINER + SECTION
   ========================================================================== */

.rg-container > .rg-section {
	min-width:
		0;

	max-width:
		100%;
}


/* ==========================================================================
   32. CONTAINER + STACK
   ========================================================================== */

.rg-container > .rg-stack {
	min-width:
		0;

	max-width:
		100%;
}


/* ==========================================================================
   33. CONTAINER CONTENT MEDIA
   ========================================================================== */

.rg-container img,
.rg-container video,
.rg-container iframe {
	max-width:
		100%;
}


/* ==========================================================================
   34. CONTAINER TABLE SAFETY
   ========================================================================== */

.rg-container table {
	max-width:
		100%;
}


/* ==========================================================================
   35. CONTAINER CODE SAFETY
   ========================================================================== */

.rg-container pre {
	max-width:
		100%;

	overflow-x:
		auto;
}


/* ==========================================================================
   36. CONTAINER FORM SAFETY
   ========================================================================== */

.rg-container form {
	max-width:
		100%;
}


/* ==========================================================================
   37. CONTAINER INPUT SAFETY
   ========================================================================== */

.rg-container input,
.rg-container select,
.rg-container textarea {
	max-width:
		100%;
}


/* ==========================================================================
   38. CONTAINER ACCESSIBILITY
   ========================================================================== */

/*
 * Container must preserve:
 *
 * - semantic document structure;
 * - readable content width;
 * - keyboard navigation;
 * - focus visibility;
 * - accessible content flow.
 */


/* ==========================================================================
   39. FOCUS SAFETY
   ========================================================================== */

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

	outline-offset:
		2px;
}


/* ==========================================================================
   40. CONTAINER SPACING BOUNDARY
   ========================================================================== */

/*
 * Container controls horizontal boundary.
 *
 * Vertical rhythm belongs to:
 *
 * - spacing tokens;
 * - sections;
 * - page layout;
 * - component/pattern owners.
 *
 * Do not add arbitrary global vertical margins here.
 */


/* ==========================================================================
   41. CONTAINER TYPOGRAPHY BOUNDARY
   ========================================================================== */

/*
 * Container does not establish a second typography system.
 *
 * Typography remains governed by:
 *
 * tokens/typography.css
 * base/typography.css
 */


/* ==========================================================================
   42. CONTAINER COLOR BOUNDARY
   ========================================================================== */

/*
 * Container does not create a second color system.
 *
 * Backgrounds and text colors must consume approved tokens where
 * presentation requires them.
 */


/* ==========================================================================
   43. CONTAINER SHADOW BOUNDARY
   ========================================================================== */

/*
 * Global container does not automatically receive shadows.
 *
 * Elevation belongs to the appropriate component/pattern.
 */


/* ==========================================================================
   44. CONTAINER RADIUS BOUNDARY
   ========================================================================== */

/*
 * Global page container does not automatically receive a border radius.
 *
 * Radius belongs to the appropriate component/pattern.
 */


/* ==========================================================================
   45. CONTAINER Z-INDEX BOUNDARY
   ========================================================================== */

/*
 * Normal document flow is the default.
 *
 * Container does not receive an arbitrary z-index.
 */


/* ==========================================================================
   46. CONTAINER POSITIONING BOUNDARY
   ========================================================================== */

/*
 * Avoid absolute positioning as a page-layout foundation.
 *
 * Container is a normal-flow layout boundary.
 */


/* ==========================================================================
   47. CONTAINER PERFORMANCE
   ========================================================================== */

/*
 * Container CSS must remain lightweight.
 *
 * No JavaScript dependency.
 *
 * No DOM measurement dependency.
 *
 * No runtime layout calculation.
 */


/* ==========================================================================
   48. CONTAINER SEO COMPATIBILITY
   ========================================================================== */

/*
 * Container must not interfere with:
 *
 * - crawlable content;
 * - semantic headings;
 * - links;
 * - structured content;
 * - readable document flow.
 */


/* ==========================================================================
   49. CONTAINER COMPONENT BOUNDARY
   ========================================================================== */

/*
 * Layout:
 *
 * Container
 * Grid
 * Flex
 * Stack
 * Section
 * Sidebar
 *
 * Components:
 *
 * Button
 * Card
 * Input
 * Badge
 * Modal
 *
 * Container remains a layout component, not a business-logic owner.
 */


/* ==========================================================================
   50. CONTAINER DOMAIN BOUNDARY
   ========================================================================== */

/*
 * container.css must never become owner of:
 *
 * RG_FEED
 * RG_TOURISM
 * RG_BIZ
 * RG_MARKET
 * RG_BOOKING
 * RG_SEARCH
 * RG_MEDIA
 * RG_VIDEO
 * RG_SEO
 * RG_AUTH
 *
 * Domain/application ownership remains outside the Theme layout layer.
 */


/* ==========================================================================
   51. CONTAINER RESPONSIVE RULE
   ========================================================================== */

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

	.rg-container {
		scroll-behavior:
			auto;
	}

}


/* ==========================================================================
   52. CONTAINER PRINT
   ========================================================================== */

@media print {

	.rg-container {
		width:
			100%;

		max-width:
			100%;

		margin-inline:
			0;
	}

}


/* ==========================================================================
   53. FINAL CONTAINER ARCHITECTURE
   ========================================================================== */

/*
 * VIEWPORT
 *     ↓
 * FULL WIDTH SURFACE
 *     ↓
 * .rg-container
 *     ↓
 * MAXIMUM CONTENT BOUNDARY
 *     ↓
 * CONTENT
 *
 * Core principles:
 *
 * Mobile First
 * Fluid
 * Container Based
 * Consistent Alignment
 * Centralized Tokens
 * No Arbitrary Widths
 * No Unnecessary Nesting
 * No Unintended Horizontal Scroll
 * Accessible
 * Performance Aware
 */