/*
 * Services section: /services/ (hub) and /services/{slug}/ (detail), plus the
 * single consultation dialog. Scoped under #pj-services and #pjs-consult.
 *
 * One shared template: page background #F5F7FA, white surfaces, navy headings,
 * a 1120px content column with a 780px reading measure, 8px-based spacing and
 * 14px radii. The header/footer above/below are the shared templates used by
 * /projects/ (white header at the top, navy when sticky); nothing here
 * compensates for them with padding or offsets. There is no breadcrumb and no
 * service-detail modal: service links are plain links to their own pages.
 */

#pj-services {
	--pjs-primary: var(--pejvak-primary, #233A7A);
	--pjs-secondary: var(--pejvak-secondary, #29AAE1);
	--pjs-bg: #F5F7FA;
	--pjs-surface: #FFFFFF;
	--pjs-line: #E1E8F0;
	--pjs-text: #243951;
	--pjs-muted: #56677C;
	--pjs-max: 1120px;
	--pjs-read: 780px;
	--pjs-gutter: clamp(16px, 3vw, 32px);
	--pjs-radius: 14px;
	--pjs-shadow: 0 1px 2px rgba(35, 58, 122, 0.05);
	/* 8px spacing scale */
	--pjs-s1: 8px; --pjs-s2: 16px; --pjs-s3: 24px; --pjs-s4: 32px; --pjs-s5: 40px;

	font-family: var(--pejvak-font);
	direction: rtl;
	text-align: start;
	color: var(--pjs-text);
	background: var(--pjs-bg);
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.8;
	word-spacing: normal;
}
#pj-services *, #pj-services *::before, #pj-services *::after { box-sizing: border-box; }
#pj-services [hidden] { display: none !important; }
#pj-services button { font: inherit; cursor: pointer; }
/* the parent theme sets p { margin: 0 0 30px; word-spacing: 1px } */
#pj-services p { margin: 0; word-spacing: normal; }
#pj-services h1, #pj-services h2, #pj-services h3 { margin: 0; letter-spacing: normal; word-spacing: normal; }
#pj-services h1, #pj-services h2, #pj-services h3,
#pj-services strong, #pj-services small { unicode-bidi: isolate; } /* RTL paragraph, embedded English runs stay readable */

#pj-services .pjs-inner {
	max-width: calc(var(--pjs-max) + 2 * var(--pjs-gutter));
	margin: 0 auto;
	padding: var(--pjs-s3) var(--pjs-gutter) 56px;
}

/* ---- return link (replaces the breadcrumb): compact glass button, in flow, not fixed ---- */
#pj-services .pjs-back { font-size: 0.9375rem; }
#pj-services .pjs-return {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 10px 18px;
	color: #233A7A; font-weight: 600; line-height: 1.5; text-decoration: none;
	border: 1px solid rgba(35, 58, 122, 0.22); border-radius: 12px;
	background: #E4EEFA;                                  /* readable solid fallback */
	box-shadow: 0 1px 3px rgba(35, 58, 122, 0.10);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#pj-services .pjs-return {
		background: rgba(214, 232, 250, 0.62);              /* translucent pale blue */
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);                          /* static, small, only on these two controls */
	}
}
#pj-services .pjs-return-icon { flex: 0 0 auto; display: block; }
#pj-services .pjs-return:hover { background-color: #D4E5F8; border-color: rgba(41, 170, 225, 0.65); box-shadow: 0 2px 6px rgba(35, 58, 122, 0.14); text-decoration: none; color: #233A7A; }
#pj-services .pjs-return:focus-visible { outline: 3px solid #29AAE1; outline-offset: 2px; }
#pj-services .pjs-back-top { margin-bottom: var(--pjs-s2); }

/* ---- page heading ---- */
#pj-services .pjs-hero { margin: 0 0 var(--pjs-s4); }
#pj-services .pjs-hero h1 {
	font-size: clamp(1.5625rem, 1.2rem + 1.1vw, 2.25rem); /* 25px mobile -> 36px desktop */
	font-weight: 700;
	line-height: 1.45;
	color: var(--pjs-primary);
	text-wrap: balance;
}
#pj-services .pjs-hero p { margin-top: var(--pjs-s1); max-width: var(--pjs-read); font-size: 1.0625rem; color: var(--pjs-muted); }
#pj-services .pjs-detail-head .pjs-detail-lead { margin: var(--pjs-s1) 0 0; font-size: 1.125rem; font-weight: 600; color: #2F4F86; }
#pj-services .pjs-detail-head .pjs-detail-intro { margin: var(--pjs-s1) 0 0; font-size: 1.0625rem; color: var(--pjs-text); }

/* ---- hub: category grid (3 / 2 / 1 columns) ---- */
#pj-services .pjs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 2 * var(--pjs-s2)) / 3)), 1fr));
	grid-auto-flow: row dense; /* an expanded category's full-width row never leaves holes beside it */
	gap: var(--pjs-s2);
}
#pj-services .pjs-grid > *, #pj-services .pjs-subgrid > * { min-width: 0; }
/* The wrapper has no box: its toggle card and its detail row are direct grid
   items, so the detail row can span the full width right after its card's row. */
#pj-services .pjs-category { display: contents; }
#pj-services .pjs-category-toggle {
	display: flex; align-items: flex-start; gap: var(--pjs-s2);
	width: 100%; min-width: 0; min-height: 112px; padding: 20px;
	text-align: start; color: inherit;
	background: var(--pjs-surface); border: 1px solid var(--pjs-line); border-radius: var(--pjs-radius);
	box-shadow: var(--pjs-shadow);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
#pj-services .pjs-category-toggle:hover { border-color: rgba(41, 170, 225, 0.6); }
#pj-services .pjs-category-toggle:focus-visible { outline: 2px solid var(--pjs-secondary); outline-offset: 2px; }
#pj-services .pjs-category.pjs-open .pjs-category-toggle { border-color: var(--pjs-secondary); background: #F0F8FD; }
#pj-services .pjs-category-copy { flex: 1; min-width: 0; }
#pj-services .pjs-category-copy strong { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; color: var(--pjs-primary); }
#pj-services .pjs-category-copy small { display: block; margin-top: 4px; font-size: 0.875rem; font-weight: 400; line-height: 1.7; color: var(--pjs-muted); }
/* plus / minus icon, drawn in CSS so every card aligns identically */
#pj-services .pjs-plus { position: relative; flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: rgba(41, 170, 225, 0.14); }
#pj-services .pjs-plus::before, #pj-services .pjs-plus::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 2px; border-radius: 1px; background: var(--pjs-primary); transition: transform 0.15s ease; }
#pj-services .pjs-plus::after { transform: rotate(90deg); }
#pj-services .pjs-category.pjs-open .pjs-plus::after { transform: rotate(0); }

#pj-services .pjs-items {
	grid-column: 1 / -1;
	min-width: 0;
	padding: var(--pjs-s3);
	background: var(--pjs-surface); border: 1px solid rgba(41, 170, 225, 0.5); border-radius: var(--pjs-radius);
	box-shadow: var(--pjs-shadow);
}
#pj-services .pjs-tech { font-size: 0.875rem; color: var(--pjs-muted); margin: 0 0 var(--pjs-s2); padding-bottom: var(--pjs-s2); border-bottom: 1px solid var(--pjs-line); }

/* ---- service tiles (inside a category row, and in the contractual section) ---- */
#pj-services .pjs-subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - var(--pjs-s2)) / 2)), 1fr)); gap: var(--pjs-s2); }
#pj-services .pjs-contracts .pjs-subgrid { grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 2 * var(--pjs-s2)) / 3)), 1fr)); }
#pj-services .pjs-service { border: 0; }
#pj-services .pjs-service-link {
	display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 44px;
	padding: var(--pjs-s2) 20px;
	background: var(--pjs-surface); border: 1px solid var(--pjs-line); border-radius: 12px;
	color: inherit; text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
#pj-services .pjs-items .pjs-service-link { background: #F7FAFD; }
#pj-services .pjs-service-link:hover,
#pj-services .pjs-service-link:focus-visible { border-color: rgba(41, 170, 225, 0.7); background: #F0F8FD; outline: none; }
#pj-services .pjs-service-link:focus-visible { box-shadow: 0 0 0 2px var(--pjs-secondary); }
#pj-services .pjs-service-link strong { font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--pjs-primary); }
#pj-services .pjs-service-link small { font-size: 0.875rem; font-weight: 400; line-height: 1.7; color: var(--pjs-muted); }
#pj-services .pjs-service-action { margin-top: auto; padding-top: 4px; font-size: 0.8125rem; font-weight: 600; color: #1B7FA8; align-self: flex-start; }
#pj-services .pjs-service-action::after { content: " \2190"; }

/* ---- contractual services (same card language) ---- */
#pj-services .pjs-contracts { margin-top: var(--pjs-s5); }
#pj-services .pjs-section-head { margin-bottom: var(--pjs-s2); }
#pj-services .pjs-section-head h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.6; color: var(--pjs-primary); }
#pj-services .pjs-muted { margin-top: 2px; font-size: 0.9375rem; color: var(--pjs-muted); }

/* ---- consultation callout (hub + detail): compact ---- */
#pj-services .pjs-help {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--pjs-s2);
	margin-top: var(--pjs-s5); padding: 20px var(--pjs-s3);
	background: var(--pjs-surface); border: 1px solid var(--pjs-line); border-inline-start: 4px solid var(--pjs-secondary); border-radius: var(--pjs-radius);
	box-shadow: var(--pjs-shadow);
}
#pj-services .pjs-help > * { min-width: 0; }
#pj-services .pjs-help strong { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--pjs-primary); }
#pj-services .pjs-help p { margin-top: 2px; font-size: 0.9375rem; color: var(--pjs-muted); }
#pj-services .pjs-cta, #pjs-consult .pjs-cta {
	background: var(--pjs-primary, #233A7A); color: #fff; border: 0; border-radius: 10px;
	padding: 10px 20px; min-height: 44px; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
	transition: background-color 0.15s ease;
}
#pj-services .pjs-cta:hover { background: #36549A; }
#pj-services .pjs-cta:focus-visible { outline: 2px solid var(--pjs-secondary); outline-offset: 2px; }

/* ---- detail page: separate sections, not one big box ---- */
#pj-services .pjs-detail-body { display: grid; gap: var(--pjs-s3); }
#pj-services .pjs-detail-body > * { min-width: 0; }
#pj-services .pjs-detail-body .pjs-help { margin-top: 0; }
#pj-services .pjs-section { background: var(--pjs-surface); border: 1px solid var(--pjs-line); border-radius: var(--pjs-radius); box-shadow: var(--pjs-shadow); padding: var(--pjs-s3) 28px; }
#pj-services .pjs-section > h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.6; color: var(--pjs-primary); margin-bottom: var(--pjs-s2); }
/* compact two-column scope list: one bullet per item (a single ::before; native markers off) */
#pj-services .pjs-scope-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 var(--pjs-s5); }
#pj-services .pjs-scope-list li { position: relative; min-width: 0; padding: 10px 0; padding-inline-start: 24px; border-bottom: 1px solid #EDF1F6; font-size: 1rem; line-height: 1.7; }
#pj-services .pjs-scope-list li { list-style: none; } /* the parent theme's `ul > li` square marker is set on the li itself */
#pj-services .pjs-scope-list li::marker { content: none; }
#pj-services .pjs-scope-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--pjs-secondary); }
#pj-services .pjs-scope-list li::after { content: none; }
/* ---- Accordions (details/summary): scope + «اطلاعات بیشتر», and any section the shared template adds with .pjs-acc ---- */
#pj-services .pjs-section.pjs-acc { padding: 0; }
#pj-services .pjs-acc > summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--pjs-s2);
	min-height: 52px; padding: 14px 28px; cursor: pointer;
	list-style: none; border-radius: var(--pjs-radius); -webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s ease;
}
#pj-services .pjs-acc > summary::-webkit-details-marker { display: none; }
#pj-services .pjs-acc > summary::marker { content: none; }
#pj-services .pjs-acc > summary:hover { background-color: #F3F8FD; }
#pj-services .pjs-acc > summary:focus-visible { outline: 2px solid var(--pjs-secondary); outline-offset: -2px; }
#pj-services .pjs-acc .pjs-acc-title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.6; color: var(--pjs-primary); }
/* chevron at the far LEFT of the row (RTL: it is the last flex item); points down, up when open */
#pj-services .pjs-acc > summary::after {
	content: ""; flex: 0 0 auto; width: 11px; height: 11px; margin-inline: 4px 6px;
	border-right: 2.5px solid var(--pjs-secondary); border-bottom: 2.5px solid var(--pjs-secondary);
	transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease;
}
#pj-services .pjs-acc[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
#pj-services .pjs-acc[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--pjs-line); }
#pj-services .pjs-acc-body { padding: var(--pjs-s2) 28px var(--pjs-s3); font-size: 1rem; color: var(--pjs-text); }
#pj-services .pjs-acc-body.pjs-more-body { max-width: calc(var(--pjs-read) + 56px); }
#pj-services .pjs-more-body h3 { font-size: 1.0625rem; margin: var(--pjs-s2) 0 var(--pjs-s1); color: var(--pjs-primary); }
#pj-services .pjs-more-body h3:first-child { margin-top: 0; }
#pj-services .pjs-steps { margin: 0 0 var(--pjs-s2); padding: 0; padding-inline-start: 24px; }
#pj-services .pjs-steps li { margin: var(--pjs-s1) 0; }
#pj-services .pjs-steps strong { display: block; font-size: 1rem; color: var(--pjs-primary); }
#pj-services .pjs-steps span { font-size: 0.9375rem; color: var(--pjs-muted); }
#pj-services .pjs-requirements { font-size: 0.9375rem; }

/* Justify only longer reading text on desktop, last line to the right; right-aligned below. */
@media (min-width: 900px) {
	#pj-services .pjs-detail-intro,
	#pj-services .pjs-more-body p { text-align: justify; text-align-last: right; text-wrap: pretty; }
}

/* (the consultation dialog's styles live in pejvak-consult.css, shared with the homepage button) */

@media (max-width: 768px) {
	#pj-services .pjs-inner { padding-bottom: 40px; }
	#pj-services .pjs-hero { margin-bottom: var(--pjs-s3); }
	#pj-services .pjs-category-toggle { min-height: 0; padding: var(--pjs-s2); }
	#pj-services .pjs-items { padding: var(--pjs-s2); }
	#pj-services .pjs-section { padding: 20px; }
	#pj-services .pjs-acc > summary { padding: 12px 20px; }
	#pj-services .pjs-acc-body { padding: 16px 20px 20px; }
	#pj-services .pjs-help { flex-direction: column; align-items: flex-start; padding: var(--pjs-s2); }
	#pj-services .pjs-help .pjs-cta { width: 100%; }
	#pj-services .pjs-detail-intro,
	#pj-services .pjs-more-body p { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	#pj-services .pjs-category-toggle,
	#pj-services .pjs-service-link,
	#pj-services .pjs-acc > summary,
	#pj-services .pjs-acc > summary::after,
	#pj-services .pjs-return,
	#pj-services .pjs-cta,
	#pj-services .pjs-plus::before,
	#pj-services .pjs-plus::after,
	#pjs-consult .pjs-phone,
	#pjs-consult-close { transition: none; }
}