/*
Theme Name: Platform HCD Theme Arabic
Theme URI: https://platformhcd.com
Author: Platform Human Capital Development
Author URI: https://platformhcd.com
Description: Arabic executive RTL theme for Platform HCD.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: platform-hcd-theme-ar
Tags: business, custom-logo, custom-menu, rtl-language-support, translation-ready, one-column
*/

/* ---------------------------------------------------------------------------
 * Design tokens.
 * ------------------------------------------------------------------------- */
:root {
	--brand-plum: #8e206a;
	--brand-violet: #5b1854;
	--brand-magenta: #a82c7d;
	--brand-slate: #70757a;
	--surface-tint: #faf5f8;
	--surface-canvas: #fcfbfd;
	--border-plum: #e5d5e0;
}

/* ---------------------------------------------------------------------------
 * RTL core.
 * ------------------------------------------------------------------------- */
html {
	direction: rtl;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	direction: rtl;
	text-align: right;
	background-color: var(--surface-canvas);
	color: #4a3a45;
	font-family: "Cairo", "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--brand-plum);
	color: #ffffff;
}

/* Custom scrollbar. */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--surface-tint);
}
::-webkit-scrollbar-thumb {
	background: var(--border-plum);
	border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--brand-plum);
}

/* Screen-reader-only utility. */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------------------------------------------------------------------------
 * Custom logo.
 * ------------------------------------------------------------------------- */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.custom-logo-link img,
.custom-logo {
	max-height: 48px !important;
	width: auto !important;
	height: auto !important;
	max-width: 220px !important;
	object-fit: contain !important;
	display: block;
}
@media (max-width: 768px) {
	.custom-logo-link img,
	.custom-logo {
		max-height: 38px !important;
		max-width: 170px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Hexagonal icon badge motif.
 * ------------------------------------------------------------------------- */
.hex-clip {
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

/* ---------------------------------------------------------------------------
 * Page-loading progress / shimmer bar.
 * ------------------------------------------------------------------------- */
.platform-hcd-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9999;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, #8e206a, #a82c7d, #5b1854, #8e206a);
	background-size: 300% 100%;
	animation: platform-hcd-progress-shimmer 1.4s linear infinite;
	box-shadow: 0 0 12px rgba(142, 32, 106, 0.35);
	transition: width 0.35s ease, opacity 0.35s ease;
}

@keyframes platform-hcd-progress-shimmer {
	0% {
		background-position: 0% 0;
	}
	100% {
		background-position: 300% 0;
	}
}

/* ---------------------------------------------------------------------------
 * Header entrance (drop-down fade).
 * ------------------------------------------------------------------------- */
.js [data-header] {
	opacity: 0;
	transform: translateY(-20px);
}

/* ---------------------------------------------------------------------------
 * Skeleton shimmer for dynamic sections.
 * ------------------------------------------------------------------------- */
@keyframes platform-hcd-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.platform-hcd-skeleton {
	background: linear-gradient(90deg, #faf5f8 25%, #f0e6ed 50%, #faf5f8 75%);
	background-size: 200% 100%;
	animation: platform-hcd-shimmer 1.6s ease-in-out infinite;
	border-radius: 12px;
	color: transparent !important;
	user-select: none;
	pointer-events: none;
}