/**
 * Ramzan Shaikh Theme - Centralized Design System
 *
 * DO NOT hard-code random spacing, colors, font sizes, or border radiuses in sections.
 * All components must strictly reference these design tokens.
 *
 * @package Ramzan_Shaikh
 * @author  SitesBySayyad
 * @version 1.5.0
 */

:root {
	/* ==========================================================================
	   1. Color Palette (Centered strictly around Black + Orange + White)
	   ========================================================================== */
	--rs-color-black: #02070D;
	--rs-color-orange: #FD650B;
	--rs-color-white: #FFFFFF;
	--rs-color-bg-warm: #FAF8F5;
	--rs-color-mobile-drawer-bg: #FCEFE7;

	/* Semantic Surface Variations */
	--rs-color-dark-surface: #08101A;
	--rs-color-dark-surface-2: #0E1724;
	--rs-color-dark-surface-3: #16202E;
	--rs-color-orange-hover: #E05304;
	--rs-color-orange-subtle: rgba(253, 101, 11, 0.12);
	--rs-color-orange-glow: rgba(253, 101, 11, 0.25);

	/* Carousel Navigation Tokens */
	--rs-carousel-arrow-bg: #FFFFFF;
	--rs-carousel-arrow-hover-bg: rgba(253, 101, 11, 0.08);
	--rs-carousel-arrow-color: #FD650B;

	/* Neutral / Muted Variations */
	--rs-color-text-primary: #02070D;
	--rs-color-text-muted: #64748B;
	--rs-color-text-light: #F8FAFC;
	--rs-color-text-light-muted: #94A3B8;

	/* Border & Line Colors */
	--rs-color-border: #E2E8F0;
	--rs-color-border-dark: rgba(255, 255, 255, 0.12);
	--rs-color-border-focus: #FD650B;

	/* Semantic Status Tokens */
	--rs-color-success: #10B981;
	--rs-color-warning: #F59E0B;
	--rs-color-error: #EF4444;
	--rs-color-info: #3B82F6;

	/* ==========================================================================
	   2. Typography System
	   ========================================================================== */
	--rs-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--rs-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Desktop Typography Scale */
	--rs-font-h1: 56px;
	--rs-line-height-h1: 1.1;
	--rs-weight-h1: 700;

	--rs-font-h2: 42px;
	--rs-line-height-h2: 1.15;
	--rs-weight-h2: 700;

	--rs-font-h3: 32px;
	--rs-line-height-h3: 1.2;
	--rs-weight-h3: 600;

	--rs-font-h4: 26px;
	--rs-line-height-h4: 1.25;
	--rs-weight-h4: 600;

	--rs-font-body-size: 15px;
	--rs-line-height-body: 1.75;
	--rs-weight-body: 400;

	--rs-font-small: 13px;
	--rs-line-height-small: 1.5;

	--rs-font-button: 15px;
	--rs-weight-button: 600;

	/* ==========================================================================
	   3. Layout & Section Spacing Tokens
	   ========================================================================== */
	--rs-container-width: 1350px;
	--rs-container-padding-desktop: 20px;
	--rs-container-padding-tablet: 20px;
	--rs-container-padding-mobile: 16px;

	--rs-section-gap-desktop: 40px;
	--rs-section-gap-mobile: 30px;

	/* ==========================================================================
	   4. Border Radiuses (Standard 8px System)
	   ========================================================================== */
	--rs-radius-sm: 4px;
	--rs-radius-md: 8px;
	--rs-radius-lg: 8px;
	--rs-radius-xl: 8px;
	--rs-radius-card: 8px;
	--rs-radius-btn: 8px;
	--rs-radius-input: 8px;
	--rs-radius-full: 9999px;

	/* ==========================================================================
	   5. Elevation & Shadows
	   ========================================================================== */
	--rs-shadow-sm: 0 1px 3px rgba(2, 7, 13, 0.08);
	--rs-shadow-md: 0 4px 12px rgba(2, 7, 13, 0.08);
	--rs-shadow-lg: 0 12px 32px rgba(2, 7, 13, 0.12);
	--rs-shadow-orange: 0 8px 24px rgba(253, 101, 11, 0.28);
	--rs-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.35);

	/* ==========================================================================
	   6. Centralized Animation & Motion Tokens
	   ========================================================================== */
	--rs-transition-fast: 150ms ease;
	--rs-transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
	--rs-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
	--rs-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Z-Index Hierarchy */
	--rs-z-header: 100;
	--rs-z-mobile-menu: 110;
	--rs-z-modal: 200;
	--rs-z-skip-link: 9999;
}

/* ==========================================================================
   Mobile Typography Overrides (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		--rs-font-h1: 38px;
		--rs-font-h2: 30px;
		--rs-font-h3: 24px;
		--rs-font-h4: 20px;
		--rs-font-body-size: 16px;
		--rs-font-small: 13px;
		--rs-font-button: 15px;
	}
}

/* ==========================================================================
   CSS Modern Reset & Baseline
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

/* Eliminate unwanted mobile browser tap highlight artifacts while preserving accessible focus */
a,
button,
input,
textarea,
select,
[role="button"],
[role="tab"],
.rs-btn,
.rs-slider-arrow,
.rs-carousel-arrow,
.rs-slider-dot,
.rs-media-nav-btn {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 2px solid var(--rs-color-orange, #FD650B);
	outline-offset: 3px;
}

html {
	font-size: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-body-size);
	line-height: var(--rs-line-height-body);
	font-weight: var(--rs-weight-body);
	color: var(--rs-color-text-primary);
	background-color: var(--rs-color-bg-warm, #FAF8F5);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	position: relative;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--rs-transition-fast);
}

/* ==========================================================================
   Accessible Skip Link
   ========================================================================== */
.rs-skip-link {
	position: absolute;
	top: -999px;
	left: 20px;
	z-index: var(--rs-z-skip-link);
	background: var(--rs-color-orange);
	color: #FFFFFF;
	padding: 12px 20px;
	font-weight: 700;
	border-radius: var(--rs-radius-btn, 8px);
	text-decoration: none;
	transition: top var(--rs-transition-fast);
}

.rs-skip-link:focus {
	top: 20px;
}

/* ==========================================================================
   Core Heading Hierarchy
   ========================================================================== */
h1, .rs-h1 {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-h1);
	line-height: var(--rs-line-height-h1);
	font-weight: var(--rs-weight-h1);
	color: var(--rs-color-black);
}

h2, .rs-h2 {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-h2);
	line-height: var(--rs-line-height-h2);
	font-weight: var(--rs-weight-h2);
	color: var(--rs-color-black);
}

h3, .rs-h3 {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-h3);
	line-height: var(--rs-line-height-h3);
	font-weight: var(--rs-weight-h3);
	color: var(--rs-color-black);
}

h4, .rs-h4 {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-h4);
	line-height: var(--rs-line-height-h4);
	font-weight: var(--rs-weight-h4);
	color: var(--rs-color-black);
}

p, .rs-body {
	font-size: var(--rs-font-body-size);
	line-height: var(--rs-line-height-body);
	color: var(--rs-color-text-muted);
}

.rs-small {
	font-size: var(--rs-font-small);
	line-height: var(--rs-line-height-small);
}

/* ==========================================================================
   Centralized Container System
   ========================================================================== */
.rs-container {
	width: 100%;
	max-width: var(--rs-container-width);
	margin-inline: auto;
	padding-inline: var(--rs-container-padding-desktop);
}

@media (max-width: 1023px) {
	.rs-container {
		padding-inline: var(--rs-container-padding-tablet);
	}
}

@media (max-width: 767px) {
	.rs-container {
		padding-inline: var(--rs-container-padding-mobile);
	}
}

/* ==========================================================================
   Centralized Section Spacing System (Desktop: 40px, Mobile: 30px)
   ========================================================================== */
.rs-section {
	padding-block: var(--rs-section-gap-desktop);
	position: relative;
}

@media (max-width: 767px) {
	.rs-section {
		padding-block: var(--rs-section-gap-mobile);
	}
}

.rs-section--dark {
	background-color: var(--rs-color-black);
	color: var(--rs-color-white);
}

.rs-section--dark h1,
.rs-section--dark h2,
.rs-section--dark h3,
.rs-section--dark h4 {
	color: var(--rs-color-white);
}

.rs-section--dark p {
	color: var(--rs-color-text-light-muted);
}

.rs-section--surface {
	background-color: #F8FAFC;
}

/* ==========================================================================
   Centralized Button System
   ========================================================================== */
.rs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-button);
	font-weight: var(--rs-weight-button);
	padding: 12px 26px;
	border-radius: var(--rs-radius-btn, 8px);
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: transform var(--rs-transition-normal),
	            background-color var(--rs-transition-normal),
	            color var(--rs-transition-normal),
	            box-shadow var(--rs-transition-normal),
	            border-color var(--rs-transition-normal);
	white-space: nowrap;
	min-height: 48px; /* Accessible touch target */
}

.rs-btn:hover {
	transform: translateY(-2px);
}

.rs-btn:active {
	transform: translateY(0);
}

.rs-btn:focus-visible {
	outline: 2px solid var(--rs-color-orange);
	outline-offset: 4px;
}

/* Primary Button: Brand Orange Background, White Text */
.rs-btn--primary {
	background-color: var(--rs-color-orange);
	color: #FFFFFF;
	border: none;
	box-shadow: 0 4px 14px rgba(253, 101, 11, 0.25);
}

.rs-btn--primary:hover {
	background-color: var(--rs-color-orange-hover);
	color: #FFFFFF;
	box-shadow: var(--rs-shadow-orange);
}

/* Secondary Button: Dark Background, White Text */
.rs-btn--secondary {
	background-color: var(--rs-color-black);
	color: var(--rs-color-white);
	border: none;
}

.rs-btn--secondary:hover {
	background-color: var(--rs-color-dark-surface-2);
	color: var(--rs-color-white);
	box-shadow: var(--rs-shadow-md);
}

/* Outline Button: Transparent, Orange Border */
.rs-btn--outline {
	background-color: transparent;
	color: var(--rs-color-orange);
	border: 1.5px solid var(--rs-color-orange);
}

.rs-btn--outline:hover {
	background-color: var(--rs-color-orange);
	color: #FFFFFF;
	box-shadow: var(--rs-shadow-orange);
}

/* Outline White (for dark sections) */
.rs-btn--outline-white {
	background-color: transparent;
	color: var(--rs-color-white);
	border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.rs-btn--outline-white:hover {
	background-color: var(--rs-color-white);
	color: var(--rs-color-black);
	border-color: var(--rs-color-white);
}

/* ==========================================================================
   Centralized Section Heading Component
   ========================================================================== */
.rs-section-header {
	margin-bottom: 28px;
	max-width: 720px;
}

.rs-section-header--center {
	margin-inline: auto;
	text-align: center;
}

.rs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--rs-font-heading);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rs-color-orange);
	background-color: var(--rs-color-orange-subtle);
	padding: 6px 14px;
	border-radius: var(--rs-radius-full);
	margin-bottom: 12px;
}

.rs-section-header__title {
	margin-bottom: 12px;
}

.rs-section-header__subtitle {
	font-size: var(--rs-font-body-size);
	line-height: var(--rs-line-height-body);
	color: var(--rs-color-text-muted);
}

.rs-section--dark .rs-section-header__subtitle {
	color: var(--rs-color-text-light-muted);
}

/* ==========================================================================
   Centralized Card & Grid System
   ========================================================================== */
.rs-grid {
	display: grid;
	gap: 24px;
}

.rs-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rs-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rs-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.rs-grid--3,
	.rs-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.rs-grid--2,
	.rs-grid--3,
	.rs-grid--4 {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.rs-card {
	background: var(--rs-color-white);
	border: 1px solid var(--rs-color-border);
	border-radius: var(--rs-radius-lg);
	padding: 28px;
	transition: transform var(--rs-transition-normal),
	            box-shadow var(--rs-transition-normal),
	            border-color var(--rs-transition-normal);
}

.rs-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--rs-shadow-lg);
	border-color: rgba(253, 101, 11, 0.3);
}

.rs-card--dark {
	background: var(--rs-color-dark-surface);
	border-color: var(--rs-color-border-dark);
	color: var(--rs-color-white);
}

.rs-card--dark:hover {
	border-color: var(--rs-color-orange);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Animation Utility Classes & Reduced Motion Support
   ========================================================================== */
[data-rs-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--rs-transition-slow), transform var(--rs-transition-slow);
	will-change: opacity, transform;
}

[data-rs-reveal].rs-is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Strictly respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-rs-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.rs-btn:hover {
		transform: none !important;
	}
}