/* =========================================================================
   EZHR Marketplace — Design System
   Light Premium SaaS / Digital Marketplace. Logical properties throughout
   so RTL (Arabic) and LTR (English) both work from the same rules.
   ========================================================================= */

:root {
	/* Color */
	--ezhr-color-primary: #2563EB;
	--ezhr-color-primary-hover: #1D4ED8;
	--ezhr-color-purple: #7C3AED;
	--ezhr-color-heading: #0F172A;
	--ezhr-color-body: #475569;
	--ezhr-color-muted: #64748B;
	--ezhr-color-background: #FFFFFF;
	--ezhr-color-section: #F8FAFC;
	--ezhr-color-border: #E2E8F0;
	--ezhr-color-success: #16A34A;
	--ezhr-color-danger: #DC2626;
	--ezhr-color-on-primary: #FFFFFF;

	/* Radius */
	--ezhr-radius-sm: 8px;
	--ezhr-radius-md: 14px;
	--ezhr-radius-lg: 22px;

	/* Layout */
	--ezhr-container: 1200px;
	--ezhr-gap: 24px;
	--ezhr-gap-lg: 40px;

	/* Shadow */
	--ezhr-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--ezhr-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--ezhr-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10);

	/* Type */
	--ezhr-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ezhr-font-arabic: "Tajawal", "Cairo", var(--ezhr-font-base);
}

/* =========================================================================
   Reset / base
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--ezhr-font-base);
	color: var(--ezhr-color-body);
	background: var(--ezhr-color-background);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

body.ezhr-rtl {
	font-family: var(--ezhr-font-arabic);
}

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

h1, h2, h3, h4, h5, h6 {
	color: var(--ezhr-color-heading);
	line-height: 1.25;
	margin: 0 0 0.5em;
	font-weight: 700;
}

a { color: var(--ezhr-color-primary); text-decoration: none; }
a:hover { color: var(--ezhr-color-primary-hover); }

/* Guard against any layout overflow — required by the QA gate. */
html, body { max-width: 100%; overflow-x: hidden; }
* { min-width: 0; }

.ezhr-skip-link {
	position: fixed;
	inset-block-start: -100px;
	inset-inline-start: 8px;
	z-index: 10000;
	background: var(--ezhr-color-heading);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--ezhr-radius-sm);
}
.ezhr-skip-link:focus {
	inset-block-start: 8px;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
}

/* =========================================================================
   Layout primitives
   ========================================================================= */

.ezhr-container {
	max-width: var(--ezhr-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.ezhr-section { padding-block: 64px; }
.ezhr-section--muted { background: var(--ezhr-color-section); }
.ezhr-section--cta {
	background: linear-gradient(135deg, var(--ezhr-color-primary), var(--ezhr-color-purple));
	color: #fff;
	text-align: center;
	border-radius: var(--ezhr-radius-lg);
}
.ezhr-section--cta h2,
.ezhr-section--cta p { color: #fff; }

.ezhr-section__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	margin-block-end: 24px;
}

/* Responsive product/content grid: 3 col desktop -> 2 tablet -> 1 mobile */
.ezhr-grid {
	display: grid;
	gap: var(--ezhr-gap);
	grid-template-columns: repeat(3, 1fr);
}
.ezhr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ezhr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ezhr-grid--4 { grid-template-columns: repeat(4, 1fr); }

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

/* =========================================================================
   Buttons
   ========================================================================= */

.ezhr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--ezhr-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.ezhr-button:active { transform: translateY(1px); }

.ezhr-button--primary {
	background: var(--ezhr-color-primary);
	color: var(--ezhr-color-on-primary);
}
.ezhr-button--primary:hover {
	background: var(--ezhr-color-primary-hover);
	color: var(--ezhr-color-on-primary);
}

.ezhr-button--ghost {
	background: transparent;
	border-color: var(--ezhr-color-border);
	color: var(--ezhr-color-heading);
}
.ezhr-button--ghost:hover {
	border-color: var(--ezhr-color-primary);
	color: var(--ezhr-color-primary);
}

.ezhr-section--cta .ezhr-button--primary {
	background: #fff;
	color: var(--ezhr-color-primary);
}

/* =========================================================================
   Header
   ========================================================================= */

.ezhr-site-header {
	border-block-end: 1px solid var(--ezhr-color-border);
	background: var(--ezhr-color-background);
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
}

.ezhr-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ezhr-gap);
	padding-block: 16px;
}

.ezhr-site-header__site-title {
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--ezhr-color-heading);
}

.ezhr-nav-menu {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ezhr-nav-menu a { color: var(--ezhr-color-body); font-weight: 500; }
.ezhr-nav-menu a:hover { color: var(--ezhr-color-primary); }

.ezhr-site-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.ezhr-site-header__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding-inline: 6px;
	border-radius: 999px;
	background: var(--ezhr-color-section);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--ezhr-color-heading);
}

.ezhr-site-header__toggle {
	display: none;
	background: none;
	border: 1px solid var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-sm);
	width: 40px;
	height: 40px;
	position: relative;
	cursor: pointer;
}
.ezhr-site-header__toggle::before,
.ezhr-site-header__toggle::after {
	content: "";
	position: absolute;
	inset-inline-start: 8px;
	inset-inline-end: 8px;
	height: 2px;
	background: var(--ezhr-color-heading);
}
.ezhr-site-header__toggle::before { inset-block-start: 14px; }
.ezhr-site-header__toggle::after { inset-block-start: 22px; }

@media (max-width: 900px) {
	.ezhr-site-header__nav { display: none; }
	.ezhr-site-header__nav.is-open { display: block; }
	.ezhr-site-header__toggle { display: block; }
}

/* =========================================================================
   Footer
   ========================================================================= */

.ezhr-site-footer {
	background: var(--ezhr-color-heading);
	color: #CBD5E1;
	margin-block-start: 64px;
}
.ezhr-site-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ezhr-gap);
	padding-block: 56px;
}
@media (max-width: 900px) { .ezhr-site-footer__columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ezhr-site-footer__columns { grid-template-columns: 1fr; } }

.ezhr-footer-widget-title { color: #fff; font-size: 1rem; }
.ezhr-site-footer a { color: #CBD5E1; }
.ezhr-site-footer a:hover { color: #fff; }

.ezhr-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 24px;
	border-block-start: 1px solid rgba(255,255,255,0.1);
	font-size: 0.85rem;
}

/* =========================================================================
   Product Card (Elementor widget + WooCommerce override share this)
   ========================================================================= */

.ezhr-product-card,
.ezhr-product-card__link {
	display: block;
	background: var(--ezhr-color-background);
	border: 1px solid var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-md);
	overflow: hidden;
	box-shadow: var(--ezhr-shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
	text-decoration: none;
	color: inherit;
	list-style: none;
}
.ezhr-product-card:hover,
li.ezhr-product-card:hover {
	box-shadow: var(--ezhr-shadow-md);
	transform: translateY(-2px);
}

.ezhr-product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ezhr-color-section); }
.ezhr-product-card__media img { width: 100%; height: 100%; object-fit: cover; }

.ezhr-product-card__badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	background: var(--ezhr-color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}
.ezhr-product-card__badge--sale { background: var(--ezhr-color-danger); }

.ezhr-product-card__body { padding: 20px; }
.ezhr-product-card__title { font-size: 1.05rem; margin-block-end: 8px; }
.ezhr-product-card__excerpt { font-size: 0.9rem; margin-block-end: 12px; }
.ezhr-product-card__price { font-weight: 700; color: var(--ezhr-color-heading); margin-block-end: 12px; }
.ezhr-product-card__cta { width: 100%; }

/* =========================================================================
   ERP Card
   ========================================================================= */

.ezhr-erp-card {
	background: var(--ezhr-color-background);
	border: 1px solid var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-md);
	overflow: hidden;
	box-shadow: var(--ezhr-shadow-sm);
}
.ezhr-erp-card__media { display: block; aspect-ratio: 16 / 9; background: var(--ezhr-color-section); overflow: hidden; }
.ezhr-erp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ezhr-erp-card__body { padding: 24px; }
.ezhr-erp-card__type {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ezhr-color-purple);
	background: rgba(124, 58, 237, 0.08);
	padding: 4px 10px;
	border-radius: 999px;
	margin-block-end: 10px;
}
.ezhr-erp-card__title { font-size: 1.15rem; margin-block-end: 12px; }
.ezhr-erp-card__title a { color: var(--ezhr-color-heading); }
.ezhr-erp-card__modules { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ezhr-erp-card__modules li {
	font-size: 0.8rem;
	background: var(--ezhr-color-section);
	border: 1px solid var(--ezhr-color-border);
	border-radius: 999px;
	padding: 4px 10px;
	color: var(--ezhr-color-body);
}
.ezhr-erp-card__modules-more { color: var(--ezhr-color-muted); }
.ezhr-erp-card__version { font-size: 0.85rem; color: var(--ezhr-color-muted); margin-block-end: 16px; }
.ezhr-erp-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ezhr-erp-category-card {
	display: block;
	padding: 24px;
	border: 1px solid var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-md);
	background: var(--ezhr-color-background);
	text-align: center;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ezhr-erp-category-card:hover { box-shadow: var(--ezhr-shadow-md); transform: translateY(-2px); }
.ezhr-erp-category-card h3 { margin-block-end: 6px; font-size: 1rem; }
.ezhr-erp-category-card__count { font-size: 0.8rem; color: var(--ezhr-color-muted); }

/* =========================================================================
   Checklist (Features / ERP Modules / Requirements on single product)
   ========================================================================= */

.ezhr-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ezhr-checklist li {
	position: relative;
	padding-inline-start: 28px;
	color: var(--ezhr-color-body);
}
.ezhr-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ezhr-color-success);
}
.ezhr-checklist--muted li::before { background: var(--ezhr-color-muted); }

/* =========================================================================
   Single product EZHR sections
   ========================================================================= */

.ezhr-single-product__section-title { font-size: 1.25rem; margin-block: 32px 16px; }
.ezhr-single-product__meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-block-start: 16px; }
.ezhr-single-product__version { font-size: 0.9rem; color: var(--ezhr-color-muted); }

/* =========================================================================
   FAQ
   ========================================================================= */

.ezhr-faq-list { display: grid; gap: 12px; }
.ezhr-faq-item {
	border: 1px solid var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-md);
	padding: 16px 20px;
	background: var(--ezhr-color-background);
}
.ezhr-faq-item__question { font-weight: 600; color: var(--ezhr-color-heading); cursor: pointer; }
.ezhr-faq-item__answer { margin-block-start: 10px; color: var(--ezhr-color-body); }

/* =========================================================================
   Breadcrumbs
   ========================================================================= */

.ezhr-breadcrumbs, .woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--ezhr-color-muted);
	margin-block-end: 24px;
}
.ezhr-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--ezhr-color-muted); }
.ezhr-breadcrumbs span[aria-hidden] { margin-inline: 6px; }

/* =========================================================================
   Blog
   ========================================================================= */

.ezhr-single-post { display: grid; grid-template-columns: 1fr; gap: var(--ezhr-gap-lg); padding-block: 48px; }
.ezhr-single-post--with-sidebar { grid-template-columns: 2.2fr 1fr; }
@media (max-width: 900px) { .ezhr-single-post--with-sidebar { grid-template-columns: 1fr; } }

.ezhr-entry__title { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.ezhr-entry__meta { color: var(--ezhr-color-muted); font-size: 0.85rem; display: flex; gap: 12px; margin-block-end: 24px; }
.ezhr-entry__thumbnail { border-radius: var(--ezhr-radius-lg); overflow: hidden; margin-block-end: 32px; }
.ezhr-entry__content { font-size: 1.05rem; }
.ezhr-entry__content > * + * { margin-block-start: 1.2em; }

.ezhr-author-bio { display: flex; gap: 16px; align-items: flex-start; margin-block-start: 40px; padding-block-start: 32px; border-block-start: 1px solid var(--ezhr-color-border); }
.ezhr-author-bio img { border-radius: 50%; }
.ezhr-related-posts { margin-block-start: 48px; }
.ezhr-related-posts__title { font-size: 1.25rem; margin-block-end: 20px; }
.ezhr-related-posts__card {
	display: block;
	border: 1px solid var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-md);
	overflow: hidden;
	color: var(--ezhr-color-heading);
	font-weight: 600;
}
.ezhr-related-posts__card span { display: block; padding: 12px 16px; }

/* =========================================================================
   Generic content / 404
   ========================================================================= */

.ezhr-generic-content { padding-block: 48px; }
.ezhr-404 { text-align: center; padding-block: 96px; display: grid; gap: 20px; justify-items: center; }
.ezhr-404__code { font-size: 5rem; color: var(--ezhr-color-primary); }
.ezhr-no-results { text-align: center; color: var(--ezhr-color-muted); padding-block: 40px; }

/* =========================================================================
   ERP page template
   ========================================================================= */

.ezhr-erp-hero { padding-block: 64px; text-align: center; }
.ezhr-erp-page__empty { text-align: center; }

/* =========================================================================
   Editor placeholder (Elementor edit mode only)
   ========================================================================= */

.ezhr-editor-placeholder {
	padding: 40px;
	text-align: center;
	border: 2px dashed var(--ezhr-color-border);
	border-radius: var(--ezhr-radius-md);
	color: var(--ezhr-color-muted);
}