/* ============================================================
   Digital Justice Theme — Main Entry Stylesheet
   العدالة الرقمية للحلول التقنية
   
   Combines all sub-systems and modular layouts.
   ============================================================ */

/* ── 1. Import Component & Layout Style Sheets ───────────── */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/misc.css');
@import url('layouts/header.css');
@import url('layouts/footer.css');
@import url('pages/home.css');

/* ── 2. CSS Custom Properties (Design Tokens) ────────────── */
:root {
	/* Grid Config */
	--dj-grid-gap: 14px;
	
	/* Spacing Scale */
	--dj-space-xs: 0.5rem;   /* 8px */
	--dj-space-sm: 0.875rem; /* 14px */
	--dj-space-md: 1.25rem;  /* 20px */
	--dj-space-lg: 1.25rem;  /* 20px - Optimized density */
	--dj-space-xl: 1.85rem;  /* 30px - Executive compact */

	/* Radii */
	--dj-radius-sm: 4px;
	--dj-radius-md: 8px;
	--dj-radius-lg: 12px;
	--dj-radius-full: 9999px;

	/* Transitions */
	--dj-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dj-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dj-transition-fast: 0.2s var(--dj-ease);
	--dj-transition-normal: 0.4s var(--dj-ease);
	--dj-transition-slow: 0.6s var(--dj-ease);
	
	/* Default Light Mode Colors fallback */
	--dj-bg-primary: #FFFFFF;
	--dj-bg-secondary: #F8FAFC;
	--dj-bg-tertiary: #EEF2F6;
	--dj-text-primary: #0F172A;
	--dj-text-secondary: #475569;
	--dj-text-muted: #94A3B8;
	--dj-border-color: #E2E8F0;
}

/* ── 3. Dark Theme Override Token Mapping ────────────────── */
[data-theme="dark"],
body.dark-theme-active {
	--dj-bg-primary: #030A16;     /* Canonical Dark BG */
	--dj-bg-secondary: #071B3B;   /* Primary Dark Navy */
	--dj-bg-tertiary: #0C2E60;    /* Dark Blue Accent */
	--dj-text-primary: #FFFFFF;
	--dj-text-secondary: #CBD5E1;
	--dj-text-muted: #718096;
	--dj-border-color: rgba(13, 71, 161, 0.2);
}

/* ── 4. CSS Resets & General Layout Defaults ─────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: var(--dj-font-size-base);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--dj-font-arabic);
	background-color: var(--dj-bg-primary);
	color: var(--dj-text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color var(--dj-transition-normal), color var(--dj-transition-normal);
	overflow-x: hidden;
	line-height: 1.7;
	padding-top: 80px; /* Compensate for fixed sticky header */
}

/* ── 5. Responsive Containers & Grid System ─────────────── */
.dj-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 1536px) {
	.dj-container {
		max-width: 1440px;
	}
}

/* Responsive Grid layouts */
.dj-grid {
	display: grid;
	gap: var(--dj-grid-gap);
}

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

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

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

@media (max-width: 960px) {
	.dj-grid-3, .dj-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.dj-grid-2, .dj-grid-3, .dj-grid-4 {
		grid-template-columns: 1fr;
	}
}

/* ── 6. Typography Scale ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--dj-font-arabic);
	font-weight: 800;
	color: var(--dj-text-primary);
	line-height: 1.3;
	margin-bottom: 10px;
}

h1 {
	font-size: calc(var(--dj-font-size-base) * var(--dj-font-scale) * var(--dj-font-scale) * var(--dj-font-scale)) !important; /* ~2.44rem */
}

h2 {
	font-size: calc(var(--dj-font-size-base) * var(--dj-font-scale) * var(--dj-font-scale)) !important; /* ~1.95rem */
}

h3 {
	font-size: calc(var(--dj-font-size-base) * var(--dj-font-scale)) !important; /* ~1.56rem */
}

h4 {
	font-size: 1.25rem !important;
}

p {
	margin-bottom: 1rem;
	color: var(--dj-text-secondary);
}

a {
	color: var(--dj-color-secondary);
	transition: color var(--dj-transition-fast);
}

[data-theme="dark"] a { color: #64b5f6; }

a:hover {
	color: var(--dj-color-accent);
}

/* ── 7. Spacing Helpers ──────────────────────────────────── */
.section-pad {
	padding: var(--dj-space-xl) 0;
}

.dj-section-divider {
	height: 1px;
	background: linear-gradient(to left, transparent, var(--dj-color-accent), transparent);
	opacity: 0.25;
	border: none;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

[data-theme="light"] .dj-section-divider {
	background: linear-gradient(to left, transparent, var(--dj-color-secondary), transparent);
	opacity: 0.15;
}

@media (max-width: 768px) {
	.section-pad {
		padding: var(--dj-space-lg) 0;
	}
}

.bg-sec {
	background-color: var(--dj-bg-secondary);
}

/* ── 8. Accessibility Utility (Screen Reader Text) ───────── */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	top: 5px;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}

/* ── 9. Animation Token System (Intersection Observer) ───── */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* ── 10. Hide desktop/mobile elements helper classes ──────── */
.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

@media (max-width: 960px) {
	.desktop-only { display: none; }
	.mobile-only { display: block; }
}

/* ── 11. Custom Scrollbar Styling ───────────────────────── */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: #030A16;
}

::-webkit-scrollbar-thumb {
	background: rgba(13, 71, 161, 0.4);
	border-radius: 5px;
	border: 2px solid #030A16;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--dj-color-accent);
}