/*
 * Baztavan theme — base styles.
 *
 * --color-primary and the font-family name are real values pulled from the
 * live site's own Simple Custom CSS/JS entries (DB post IDs 1440 "mainstyle"
 * and 1498 "font"), not guessed — #009893 (button background) / #099893
 * (link color) are the same brand teal, and the font is 'dana' in all 3
 * weights actually declared and used (400/500/700), not the 2-weight
 * default this file assumed before. --color-navy and --color-bg-tint are
 * still an approximation from Figma screenshots, not yet confirmed the
 * same way — treat those two as a first pass.
 *
 * Fonts are now the real, subset, self-hosted copies (Phase 2 work, done):
 * assets/fonts/dana-{regular,medium,bold}.woff2, produced from the live
 * site's own dana-fanum-*.woff files via pyftsubset (Persian/Arabic +
 * Latin + ZWNJ/ZWJ ranges, per reference/persian-font-optimization.md) —
 * ~32KB per weight down to ~15.5KB, 96KB combined down to ~46.5KB.
 *
 * This file now loads asynchronously (preload+swap, see functions.php's
 * style_loader_tag filter) — it is NOT render-blocking. The :root vars,
 * reset, and header rules that WOULD cause a flash of unstyled content
 * before this loads live in critical.css instead (inlined in <head>), not
 * here — don't re-add them here, that'd just duplicate/desync them.
 */

@font-face {
	font-family: "dana";
	src: url("../fonts/dana-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0600-06FF, U+200C-200D;
}

@font-face {
	font-family: "dana";
	src: url("../fonts/dana-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0600-06FF, U+200C-200D;
}

@font-face {
	font-family: "dana";
	src: url("../fonts/dana-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0600-06FF, U+200C-200D;
}

a {
	color: var(--color-primary-dark);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* Header (base .site-header/.site-header__inner/.site-header__logo img
   rules are in critical.css, inlined — not here) */

.site-header__menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	color: var(--color-text);
	cursor: pointer;
}

.post-single__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}

.post-single__content th,
.post-single__content td {
  border: 1px solid #d8dde3;
  padding: 0.6em 0.9em;
  text-align: right;
}

.post-single__content thead th {
  background: #f4f6f8;
  font-weight: 700;
}

.post-single__content tbody tr:nth-child(even) {
  background: #fafbfc;
}

@media (max-width: 600px) {
  .post-single__content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/*
 * Only relevant to the mobile flyout — hidden by default so it doesn't
 * show up as a stray icon inline in the desktop menu bar (it lives
 * inside `<nav>`, alongside `خانه`/`خدمات`/etc as markup, so without this
 * it would render as an extra flex item there).
 */
.site-header__nav-close {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	color: var(--color-text);
	cursor: pointer;
}

.site-header__menu {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-header__menu a {
	text-decoration: none;
	color: var(--color-text);
}

/*
 * Down-chevron on any top-level item that opens a mega menu (e.g.
 * "خدمات") — a real, visible affordance production has that this
 * rebuild's nav was missing entirely (flagged via screenshot).
 * CSS-only border-triangle, no icon font/SVG dependency.
 */
.menu-item--has-mega > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.menu-item--has-mega > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	border: solid currentColor;
	border-width: 0 0.13em 0.13em 0;
	transform: rotate(45deg);
	margin-block-start: -0.2em;
}

/*
 * Mega menu — replaces a plain nested flyout-in-flyout dropdown, which
 * doesn't work for this site's real menu (checked directly against the
 * registered menu's items, not assumed): up to 4 levels deep in places
 * (خدمات → کاردرمانی/گفتار درمانی → جسمی/ذهنی → individual condition
 * pages).
 *
 * Full-bleed against `.site-header` (not a small floating box centered
 * under the nav) — a real full-width panel, edge to edge, with its own
 * `.wrap`-constrained inner row so the columns themselves still read at
 * the site's normal content width. Each depth-1 group renders as its own
 * card with a colored accent edge, matching the card language used
 * throughout the rest of this theme (service cards, why-us cards) rather
 * than a plain bulleted list.
 *
 * `:has()` (not depth) decides whether an item reads as a heading —
 * whatever actually has children gets heading treatment, whatever's a
 * leaf gets plain link treatment, regardless of how deep it sits. Depth
 * classes only control size/prominence (a depth-1 card title is bigger
 * than a depth-2 sub-heading), never whether something looks clickable.
 *
 * Opens on hover (mouse) or focus-within (keyboard) with no JS required
 * for that base behavior; assets/js/nav.js only adds touch-tap support and
 * the mobile toggle on top of this.
 */
.mega-menu {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 20;
	background: #fff;
	border-top: 1px solid var(--color-border);
	box-shadow: 0 1rem 2rem rgba(14, 42, 61, 0.12);
}

.menu-item--has-mega:hover > .mega-menu,
.menu-item--has-mega:focus-within > .mega-menu,
.menu-item--has-mega.is-open > .mega-menu {
	display: block;
}

.mega-menu__inner {
	padding-block: 2rem;
}

.mega-menu__columns {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
}

.mega-menu__columns > .mega-menu__item {
	background: var(--color-bg-tint);
	border-inline-start: 3px solid var(--color-primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 1.5rem 1.75rem;
}

.mega-menu__item > a {
	display: block;
	color: var(--color-text);
}

.mega-menu__item:has(> .mega-menu__sublist) > a {
	font-weight: 600;
	color: var(--color-primary-dark);
	padding-block-end: 0.5rem;
	margin-block-end: 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.mega-menu__columns > .mega-menu__item--depth-1 > a {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-navy);
	border-bottom-color: var(--color-primary);
	border-bottom-width: 2px;
}

.mega-menu__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu__sublist > .mega-menu__item {
	margin-block-end: 0.65rem;
}

.mega-menu__sublist .mega-menu__sublist {
	padding-inline-start: 0.85rem;
	margin-block-start: 0.35rem;
}

.mega-menu__sublist .mega-menu__sublist > .mega-menu__item {
	margin-block-end: 0.35rem;
}

.mega-menu__sublist .mega-menu__item:not(:has(> .mega-menu__sublist)) > a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	transition: color 0.15s ease;
}

.mega-menu__item > a:hover {
	color: var(--color-primary);
}

@media (max-width: 900px) {
	/*
	 * On desktop, `.site-header__nav` (`flex:1`) is what pushes the logo
	 * and CTA apart to the two edges — but on mobile the nav becomes
	 * `position:fixed` (the flyout panel) and drops out of the flex layout
	 * entirely, so nothing plays that spacer role any more. Without this,
	 * the three remaining items (toggle/cta/logo) just pack together under
	 * `justify-content`'s default `flex-start`, leaving the logo floating
	 * with a visible gap short of the true left edge instead of sitting
	 * flush against it — confirmed via a real mobile screenshot and the
	 * logo's own `getBoundingClientRect()` (left: ~99px, not ~20px).
	 * `space-between` spreads the first/last flex-order items (toggle,
	 * logo) to the two edges again, same as the nav used to.
	 */
	.site-header__inner {
		justify-content: space-between;
	}

	.site-header__menu-toggle {
		display: inline-flex;
		/*
		 * Real mobile header order, confirmed against a true mobile-width
		 * screenshot of production (390px, via CDP device emulation — the
		 * `--window-size` CLI flag clamps below ~500px and can't be
		 * trusted here, see PLAN.md): the toggle sits at the visual RIGHT
		 * edge, the logo at the visual LEFT — the reverse of source order
		 * under RTL, which is why `order` is needed instead of relying on
		 * DOM order. Source order (logo, toggle, nav, cta) is unchanged
		 * for desktop, where it was already correct.
		 */
		order: 1;
	}

	.site-header__cta {
		order: 2;
		/* Smaller pill + a muted tint instead of the solid brand teal —
		   flagged via screenshot as too visually loud ("می‌زند تو ذوق") next
		   to the small logo/icon at this width. */
		padding: 0.45rem 1rem;
		font-size: 0.8rem;
	}

	.site-header__logo,
	.site-header__logo--text {
		order: 3;
	}

	.site-header__logo img {
		/* Smaller on mobile — flagged via screenshot as oversized relative
		   to the rest of the collapsed header. */
		height: 2.25rem;
	}

	/*
	 * Right-side slide-in flyout, not a top dropdown — flagged via
	 * screenshot as the wrong pattern for mobile (a full-width band pushing
	 * page content down read as broken/janky). `position:fixed` (not
	 * `absolute`) so it's anchored to the viewport, not the header, and
	 * unaffected by page scroll position. Kept in the DOM (not
	 * `display:none`) so `transform` can transition it in from off-screen;
	 * `visibility` does the job `display` used to do for hiding it from
	 * layout/tab-order while closed, with its own zero-duration transition
	 * delayed until the slide-out finishes so it doesn't pop away mid-
	 * animation when closing.
	 */
	.site-header__nav {
		display: block;
		position: fixed;
		inset-block: 0;
		right: 0;
		left: auto;
		top: 0;
		bottom: 0;
		width: min(20rem, 85vw);
		max-height: none;
		background: #fff;
		border-bottom: 0;
		border-inline-start: 1px solid var(--color-border);
		box-shadow: -1rem 0 2rem rgba(14, 42, 61, 0.15);
		overflow-y: auto;
		visibility: hidden;
		transform: translateX(100%);
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
		/* See the z-index comment history in PLAN.md: a `position:relative`
		   section further down the page (e.g. `.home-hero`) can otherwise
		   paint on top of a z-index:auto positioned panel regardless of
		   DOM order. */
		z-index: 30;
	}

	.site-header__nav.is-open {
		visibility: visible;
		transform: translateX(0);
		transition: transform 0.3s ease;
	}

	/*
	 * Explicit close affordance inside the panel itself — flagged via
	 * screenshot: tapping the hamburger again or the backdrop works, but a
	 * flyout this size reads as needing its own dedicated close control,
	 * and without one the first item ("خانه") also sat flush against the
	 * very top edge with no breathing room. Top-left placement (not
	 * top-right, despite RTL) mirrors where a reader's eye naturally lands
	 * after the panel slides in from the right — the near corner, not the
	 * far one.
	 */
	.site-header__nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
	}

	.site-header__menu {
		flex-direction: column;
		gap: 0;
		padding: 1rem;
		/* Clears the absolutely-positioned close button (its own height +
		   top offset) so "خانه" doesn't sit flush under it. */
		margin-block-start: 3rem;
	}

	.site-header__menu > .menu-item {
		border-bottom: 1px solid var(--color-border);
	}

	/* More breathing room between items — flagged via screenshot as too
	   cramped (the link text alone, no vertical padding, made each row
	   only as tall as one line of text). */
	.site-header__menu > .menu-item > a {
		display: block;
		padding-block: 1rem;
	}

	/* On mobile the mega panel becomes a normal stacked block under its
	   parent item instead of an absolutely-positioned, full-bleed panel —
	   a full-width floating band doesn't make sense on a narrow screen
	   that's already showing the nav as one stacked column. */
	.mega-menu {
		position: static;
		inset-inline: auto;
		display: none;
		box-shadow: none;
		border-top: 0;
	}

	.menu-item--has-mega.is-open > .mega-menu {
		display: block;
	}

	/* Undo the desktop `.wrap` constraint (max-width + its own inline
	   padding) here — on mobile this just needs to sit flush under its
	   parent item, indented once, not centered at a content-page width. */
	.mega-menu__inner {
		max-width: none;
		padding: 0.5rem 0 0.5rem 1rem;
	}

	.mega-menu__columns {
		grid-template-columns: 1fr;
	}

	.mega-menu__columns > .mega-menu__item {
		background: none;
		padding: 0;
		/* The desktop card look's teal accent edge (`border-inline-start`,
		   i.e. the right side under RTL) was never reset here — with the
		   card background/padding already stripped for mobile's plain
		   stacked-list treatment, that lone border was left behind as a
		   stray vertical line running down the whole depth-1 group.
		   Flagged via screenshot. */
		border-inline-start: 0;
		border-radius: 0;
	}
}

/*
 * Footer — four separate rounded "cards" on a light-cyan band, matching
 * the live site's own footer Elementor template (DB post 212) exactly,
 * not the plain-columns-on-dark-navy guess this had before. Real values
 * throughout (colors, radii, the Balad map), not approximated.
 */

.site-footer {
	background: #ecfbff;
	color: var(--color-navy);
	margin-top: 80px;
}

.site-footer__grid {
	padding-block: 40px;
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr 1fr;
	gap: 1.5rem;
	align-items: start;
}

.site-footer__col--map {
	background: #d5f5fd;
	border-radius: 16px 16px 16px 30px;
	padding: 1.5rem;
	min-height: 16rem;
}

.site-footer__col--links,
.site-footer__col--contact {
	padding: 1.5rem;
	min-height: 16rem;
}

.site-footer__col--brand {
	background: #003756;
	color: #fff;
	border-radius: 16px 16px 16px 40px;
	margin-top: -60px;
	min-height: 27rem;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-footer__logo-img {
	width: 10rem;
	height: auto;
	margin-block-end: 1.25rem;
}

.site-footer__col--brand p {
	margin: 0;
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.8;
}

.site-footer__col h3 {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.6rem 0.9rem;
	background: #003756;
	color: #fff;
	border-radius: 0.5rem;
	font-size: 1rem;
}

.site-footer__menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
}

.site-footer__menu a {
	color: var(--color-navy);
	text-decoration: none;
	padding-inline-start: 1rem;
	position: relative;
}

.site-footer__menu a::before,
.site-footer__contact li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.5em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #54b1c9;
}

.site-footer__menu a:hover {
	color: var(--color-primary-dark);
}

.site-footer__contact {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0 0 1.25rem;
	padding: 0;
}

.site-footer__contact li {
	position: relative;
	padding-inline-start: 1rem;
}

.site-footer__contact a,
.site-footer__contact span {
	color: var(--color-navy);
	text-decoration: none;
}

.site-footer__contact a:hover {
	color: var(--color-primary-dark);
}

.site-footer__social {
	display: flex;
	gap: 0.6rem;
	margin: 0;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #003756;
	color: #fff;
}

.site-footer__map {
	width: 100%;
	height: 100%;
	min-height: 13rem;
	border: 0;
	border-radius: 0.75rem;
	display: block;
}

.site-footer__bottom {
	padding-block: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.site-footer__copy {
	margin: 0;
	color: #000;
}

.site-footer__bottom-credit {
	margin: 0;
	order: -1;
}

.site-footer__bottom-credit a {
	color: #ff9900;
	text-decoration: none;
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__col--brand {
		margin-top: 0;
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.site-footer__menu a,
	.site-footer__contact li {
		padding-inline-start: 0;
	}

	.site-footer__menu a::before,
	.site-footer__contact li::before {
		display: none;
	}

	.site-footer__social {
		justify-content: center;
	}

	.site-footer__bottom {
		justify-content: center;
		text-align: center;
	}
}

.icon {
	flex-shrink: 0;
}

.site-header__logo--text {
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none;
	color: var(--color-navy);
}

/* Buttons */

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 600;
	/* A <button> (the contact forms use a real submit button, not just
	   <a> links) carries the browser's own default border/appearance on
	   top of anything set here unless explicitly reset — without this a
	   dark 3D-ish UA border showed up around the teal background. */
	border: 0;
	appearance: none;
	font: inherit;
	cursor: pointer;
}

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

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

/*
 * Home hero + services band + CTA.
 *
 * The hero background (gradient + decorative blur/geometric shapes + the
 * wheelchair/toy-cart photo) is ONE baked raster image on the live site
 * (baztavan-hiro-min.webp, referenced by its own .hiro-img class in the
 * site's Simple Custom CSS/JS "mainstyle" entry, DB post 1440) — not
 * separate DOM layers. Using it directly as a CSS background here is the
 * real match, not a re-creation of shapes that were never separate
 * elements to begin with.
 */
.home-hero {
	position: relative;
	background-image: url("../../../../uploads/2025/11/baztavan-hiro-min.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 34rem;
	display: flex;
	align-items: center;
	text-align: center;
}

.home-hero__inner {
	width: 100%;
}

.home-hero h1 {
	margin: 0 auto;
	max-width: 46rem;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-navy);
}

.home-hero__highlight {
	color: #fff;
}

/*
 * The teal "services band" uses the live site's own wavy-blob shape
 * (Subtract-1.png, background-size: contain) instead of a plain rectangle,
 * with the same Pattern-10.webp corner decorations the live site draws via
 * ::before/::after on .services-baztavan. Real assets, not redrawn shapes.
 */
.home-services-band {
	position: relative;
	margin-block-start: -4rem;
	padding-block: 4rem 1.5rem;
	/*
	 * background-size:100% 100% (stretch-to-fill) was the actual bug: it
	 * distorted Subtract-1.png's real proportions, so the shallow V-notch
	 * in its top edge (visible in the source file) landed at a different,
	 * viewport-dependent height each time — sometimes right behind the
	 * heading text, letting the hero image's light decorative shapes
	 * bleed through and visually merge with the white heading (confirmed
	 * by screenshot: looked like doubled/garbled letters). Fixed at the
	 * real cause, not papered over with padding: `contain` keeps the
	 * shape at its true, un-distorted proportions (a short strip near the
	 * top), so the notch stays small and near the top regardless of
	 * viewport width, instead of stretching arbitrarily tall.
	 */
	background-image: url("../../../../uploads/2025/03/Subtract-1.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	max-width: 80%;
	margin-inline: auto;
}

.home-services-band::before,
.home-services-band::after {
	content: "";
	position: absolute;
	width: 8rem;
	height: 8rem;
	background-image: url("../../../../uploads/2025/12/Pattern-10.webp");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.6;
	pointer-events: none;
}

.home-services-band::before {
	top: 0;
	inset-inline-end: 0;
	z-index: 0;
}

.home-services-band::after {
	bottom: 0;
	inset-inline-start: 0;
	z-index: 0;
}

.home-services-band > .wrap {
	/*
	 * Without an explicit z-index, the ::before corner decoration (also
	 * position:absolute) was painting ON TOP of the "خدمات بازتوان"
	 * heading instead of behind it — position:relative alone doesn't
	 * decide stacking order between two auto-z-index positioned boxes,
	 * it just falls back to DOM order, which put the pseudo-element on
	 * top. Confirmed by screenshot: the pattern was visibly overlapping
	 * and garbling the heading text.
	 */
	position: relative;
	z-index: 1;
}

.home-services-band h2 {
	margin-block-start: 0;
	text-align: center;
	color: #fcfcfc;
	font-size: 1.5rem;
	font-weight: 600;
}

.home-services-band__grid {
	margin-block: 1.5rem -3rem;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.home-services-band__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 185px;
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: 0px 8px 40px -18px rgba(41, 65, 115, 0.8);
	padding: 1.5rem 1rem;
	text-decoration: none;
	color: var(--color-navy);
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
}

.home-services-band__card--pending {
	cursor: default;
	color: var(--color-text-muted);
}

.home-services-band__icon {
	width: 3.5rem;
	height: 3.5rem;
}

@media (max-width: 900px) {
	.home-hero h1 {
		font-size: 1.75rem;
	}

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

@media (max-width: 560px) {
	.home-services-band__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Stats strip ("مرکز توانبخشی بازتوان در یک نگاه") — real numbers, see
 * front-page.php's $stats / local-preview/migrate-stats.php. Shared by
 * both the front page and the about page (`.home-stats`, same markup) —
 * flagged via screenshot on the about page as sitting with almost no
 * gap under the section above it.
 */
.home-stats {
	margin-block-start: 80px;
}

.home-stats__panel {
	display: grid;
	grid-template-columns: 1.2fr repeat(3, 1fr);
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.home-stats__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: linear-gradient(135deg, #299dbc, #56d1f1);
	color: #fff;
	text-align: center;
}

.home-stats__heading h2 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
}

.home-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 1.5rem 1rem;
	text-align: center;
}

.home-stats__icon {
	width: 2.75rem;
	height: 2.75rem;
}

.home-stats__number {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.home-stats__number span {
	display: block;
	color: #006a89;
	font-size: 1.5rem;
	font-weight: 700;
}

.home-stats__label {
	margin: 0;
	font-weight: 500;
}

@media (max-width: 900px) {
	.home-stats__panel {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-stats__heading {
		grid-column: 1 / -1;
	}
}

/*
 * CTA lead form — real "۳۰ دقیقه مشاوره رایگان" section, posts through
 * the same baztavan_handle_contact_form() page-contact.php already uses.
 */
.home-cta {
	background: linear-gradient(90deg, #0f83a2 0%, #1385a4 50%, #0f83a2 100%);
	color: #fff;
	padding-block: 3.5rem;
}

.home-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.5rem;
}

.home-cta__copy h2 {
	margin: 0 0 0.5rem;
}

.home-cta__copy p {
	margin: 0;
	color: #eaf7fb;
}

.home-cta__form {
	width: 100%;
	max-width: 22rem;
	text-align: start;
}

.home-cta__form .contact-form__field label {
	color: #fff;
}

.home-cta__form .contact-form__field input {
	border: 0;
	background: #fff;
}

.home-cta__form .button--primary {
	width: 100%;
	text-align: center;
}

/* Service cards */

.service-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin-block-start: 1.5rem;
}

/*
 * CSS-only replacement for the live site's Swiper carousels
 * (.baztavan-services-container, .baztavan-old-rehabilitaion,
 * .hand-therapy-container — confirmed real usage in DB post 610
 * "mainSwiper.js"). Zero JavaScript, native scroll-snap — same sliding,
 * swipeable feel without a ~70KB third-party library. Reuse this class
 * anywhere the old site had a Swiper carousel; roughly matches Swiper's own
 * breakpoints (1 item under 576px, 3 above).
 */
.service-carousel {
	display: flex;
	gap: 1.25rem;
	margin-block-start: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1.25rem;
	padding-block-end: 0.5rem; /* room for the scrollbar so it doesn't overlap cards */
	-webkit-overflow-scrolling: touch;
}

.service-carousel .service-card {
	flex: 0 0 calc(100% - 2.5rem);
	scroll-snap-align: start;
}

@media (min-width: 576px) {
	.service-carousel .service-card {
		flex-basis: calc(33.333% - 1rem);
	}
}

.service-card {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.service-card:hover {
	box-shadow: 0 0.5rem 1.25rem rgba(14, 42, 61, 0.12);
}

.service-card__body {
	padding: 1rem 1.25rem;
}

.service-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
}

.service-card__subtitle {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/* Service detail */

/*
 * Real service-page hero, confirmed against multiple live pages' own
 * generated Elementor CSS (not just their HTML): a rounded, boxed card —
 * not a full-bleed banner — min-height ~500px, 24px corners, solid teal
 * (#009893) by default. `.wrap` already constrains `.service-hero__inner`
 * to the site's max content width; the rounded/backgrounded box lives on
 * that inner element so it reads as a contained card with page margin
 * around it, matching production, instead of edge-to-edge.
 */
.service-hero {
	padding-block: 2rem;
}

.service-hero__inner {
	background-color: var(--color-primary);
	color: #fff;
	min-height: 22.8rem;
	display: flex;
	/*
	 * Stacked (heading, then subtitle directly below), not side-by-side —
	 * confirmed against production's real screenshot for a short-text page
	 * (/occupational-therapy/physical-occupational-therapy/کاردرمانی-
	 * سالمندان/): plain `display:flex` with no direction ran h1 and
	 * `.service-hero__subtitle` into one row, which read as one run-on
	 * line of text whenever both were short. Longer text elsewhere hid the
	 * same bug by accident (the h1 alone wrapped to fill the row).
	 */
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.75rem;
	border-radius: 1.5rem;
	padding: 2.5rem;
	position: relative;
	overflow: hidden;
}

/*
 * Real per-page hero photo. Confirmed two different real pages' generated
 * CSS have genuinely different treatments here (one plain cover image with
 * no overlay at all, another a solid-color overlay at ~0.83 opacity) — this
 * rebuild uses one shared, close-enough overlay rather than mining and
 * storing each page's bespoke overlay color/opacity, consistent with this
 * theme's "one template, not one-off per page" approach elsewhere.
 */
.service-hero.has-image .service-hero__inner {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.service-hero.has-image .service-hero__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(265deg, #004c49 6%, #008a8540 100%);
	opacity: 0.94;
}

.service-hero__inner > * {
	position: relative;
	z-index: 1;
}

.service-hero__inner h1 {
	color: #fff;
}

.service-hero__subtitle {
	color: #eafaf9;
	max-width: 40rem;
}

/*
 * Real per-page hero CTA (e.g. "مشاوره و رزرو وقت", usually a `tel:`
 * link) — confirmed against a real production screenshot as a small
 * white/light button (not the solid-teal `.button--primary` look), since
 * it sits on the same dark teal hero background as the heading.
 */
.service-hero__cta {
	display: inline-block;
	margin-block-start: 1.25rem;
	background: #fff;
	color: var(--color-primary-dark);
	padding: 0.65rem 1.5rem;
	font-size: 0.9rem;
}

.service-hero__cta:hover {
	background: #eafaf9;
}

/*
 * `.service-hero__inner h1` has no explicit size elsewhere in this file —
 * it was riding the browser's UA-default `2em`, which read comfortably at
 * desktop widths but ran to 3 full lines and dominated the screen on a
 * real mobile screenshot. Give it an explicit size here (matching what the
 * UA default was actually rendering at desktop, so nothing changes there)
 * so the mobile override below has something concrete to reduce.
 */
.service-hero__inner h1 {
	font-size: 2rem;
}

@media (max-width: 900px) {
	.service-hero__inner h1 {
		font-size: 1.5rem;
	}
}

.service-detail {
	padding-block: 2.5rem;
}

/*
 * No reading-width cap here — checked directly against a live production
 * screenshot at the same 1440px viewport (not the earlier "comfortable
 * reading measure" guess this used to be): production's intro prose and
 * its callout box both run the full .wrap width, same as the card grids.
 * Narrowing them to 48rem just wrapped the same real text onto visibly
 * more lines than production shows.
 */

/*
 * The raw content dumped into `intro` (post_content mined section by
 * section, see local-preview/parse-service-content.php) still has its own
 * internal headings and lists — "چه افرادی نیاز دارند" style sub-groups
 * that don't fit a repeater schema and are deliberately left as prose, not
 * every possible sub-pattern is worth forcing into a rigid field. Without
 * this, that prose rendered with zero visual hierarchy (bare browser
 * defaults) right next to the carefully designed sections around it —
 * exactly the "raw dump" the intro-only rendering used to produce for
 * hub pages that had no leaf-only branch to give it any styling at all.
 */
.service-detail__intro h2 {
	font-size: 1.35rem;
	margin-block: 2rem 0.75rem;
}

.service-detail__intro h2:first-child {
	margin-block-start: 0;
}

/*
 * Real value confirmed against a live service page's own _elementor_data
 * (the "چه افرادی نیاز دارند" container): background_color #EDFBFF,
 * border style solid.
 */
.service-callout {
	background: #edfbff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem 1.75rem;
	margin-block: 2rem;
}

.service-callout h2 {
	margin-block-start: 0;
	text-align: center;
}

.service-callout ul,
.service-callout ol {
	margin-block-end: 0;
}

.service-detail__intro h3 {
	font-size: 1.1rem;
	color: var(--color-navy);
	margin-block: 1.5rem 0.5rem;
}

.service-detail__intro p {
	margin-block-end: 1rem;
}

.service-detail__intro ul,
.service-detail__intro ol {
	padding-inline-start: 1.25rem;
	margin-block-end: 1rem;
}

.service-detail__intro li {
	margin-block-end: 0.4rem;
}

.service-detail > section {
	margin-block-start: 2.5rem;
	padding-block-start: 2rem;
	border-top: 1px solid var(--color-border);
}

.service-benefits__list,
.service-steps__list {
	padding-inline-start: 1.25rem;
}

.service-benefits__list li,
.service-steps__list li {
	margin-block-end: 1rem;
}

/*
 * Real per-item icons found in production for benefits/process_steps items
 * (batch-3 fidelity audit, image-box widgets, same source pattern as
 * why_us/content_sections icons) — small inline glyph before the item's
 * title, since these sections render as a plain list rather than a card
 * grid.
 */
.service-benefits__icon,
.service-steps__icon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: middle;
	margin-inline-end: 0.5rem;
}

.service-why-us .home-why-us__grid,
.service-content-section__grid {
	margin-block-start: 1.5rem;
}

/*
 * Matches production: this section's heading + intro sentence are
 * centered above the card grid, same treatment as content_sections above.
 */
.service-why-us {
	text-align: center;
}

.service-why-us__subtitle {
	max-width: 40rem;
	margin-inline: auto;
	margin-block: 0.5rem 0;
	color: var(--color-text-muted);
}

.service-why-us .home-why-us__grid {
	text-align: right;
}

/*
 * A second, full-width colored banner near the end of the page (before
 * FAQ) — confirmed on /speech-therapy/'s "کلینیک بازتوان: جایی برای شروع
 * دوباره": its own heading + paragraph + a `tel:` button, distinct from
 * the hero's own CTA. Reuses the site's teal brand color, matching the
 * "form-consult" banner class production gives this exact widget.
 */
.service-closing-cta {
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius);
	padding: 2.5rem;
	margin-block: 2.5rem;
	text-align: center;
}

.service-closing-cta h2 {
	margin-block-start: 0;
}

.service-closing-cta__text {
	max-width: 40rem;
	margin-inline: auto;
	margin-block-end: 1.5rem;
	opacity: 0.9;
}

.service-closing-cta .button--primary {
	background: #fff;
	color: var(--color-primary-dark);
}

.service-closing-cta .button--primary:hover {
	background: #eafaf9;
}

/*
 * Fixed 3 columns, not the base `.home-why-us__grid`'s auto-fit — checked
 * directly against a live production screenshot at 1440px: both this
 * section and content_sections run a real 3-column grid there, while
 * auto-fit(minmax(15rem,...)) comfortably fits 4 across the same width.
 * Collapses the same way the front page's own why-us grid already does.
 * Specificity note: `.service-content-section__grid` alone ties with the
 * base `.home-why-us__grid` rule (both one class), and the base rule sits
 * later in this file — so it needs the extra `.service-content-section`
 * ancestor to actually win, not just repetition of the same selector.
 */
.service-why-us .home-why-us__grid,
.service-content-section .service-content-section__grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.service-why-us .home-why-us__grid,
	.service-content-section .service-content-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.service-why-us .home-why-us__grid,
	.service-content-section .service-content-section__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * content_sections cards: same grid/card language as home-why-us so a
 * page built from "structured guess" content (local-preview/parse-service-
 * content.php's generic h2+h3-cluster detection, see PLAN.md) looks
 * identical to the hand-modelled why_us/benefits sections next to it,
 * not like a second, slightly-different design system.
 *
 * No tinted wrapper here — confirmed against both a real production
 * screenshot and the source _elementor_data: sections shaped like "نقش..."/
 * "اهداف..." (a heading + h3-item grid) sit directly on the plain page
 * background in production, each item card carrying its own white
 * background + shadow. The earlier version wrapped this in the same
 * #EDFBFF box as `.service-callout` — that box only actually belongs to
 * the different "one sentence + bullet list" callout shape.
 */
.service-content-section {
	border-top: 0 !important;
	text-align: center;
}

.service-content-section__subtitle {
	max-width: 40rem;
	margin-inline: auto;
	margin-block: 0.5rem 0;
	color: var(--color-text-muted);
}

.service-content-section__grid {
	text-align: right;
}

.service-content-section__item-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 0.5rem;
}

/*
 * Sized against a real production screenshot
 * (/occupational-therapy/mental/'s "زیرشاخه‌های کاردرمانی ذهنی": numbered
 * badges measure ~3.75rem there, not the ~1.75rem this used before —
 * visibly undersized next to the real site, not just a rounding
 * difference) — applies to both the numbered-badge fallback and any real
 * per-item icon in the plain grid-card branch.
 */
.service-content-section__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
}

.service-content-section__icon {
	flex: 0 0 auto;
	width: 3.75rem;
	height: 3.75rem;
	object-fit: contain;
}

.service-content-section__item h3 {
	margin-block: 0;
}

.service-content-section__item ul {
	margin-block: 0.5rem 0;
	padding-inline-start: 1.1rem;
	color: var(--color-text-muted);
}

.service-content-section__item li {
	margin-block-end: 0.3rem;
}

/*
 * Plain grid-card items can carry a real CTA/tags too (e.g.
 * /occupational-therapy/mental/sensory-integration/'s "مطالعه بیشتر"
 * links) even with no photo — reuses the hero-card tag styling so both
 * branches of $render_content_section look consistent.
 */
.service-content-section__item .service-content-section__cta {
	display: inline-block;
	margin-block-start: 0.75rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
}

.service-content-section__item .service-hero-card__tags-heading {
	margin-block: 0.75rem 0.4rem;
	font-size: 0.95rem;
}

/*
 * Tabs mode (content_sections `is_tabs`) — production's real interactive
 * Elementor tabs widget (e.g. /occupational-therapy/mental/'s "چه افرادی
 * به کاردرمانی ذهنی و شناختی نیاز دارند؟"): a row of pill buttons, only
 * one panel visible at a time. JS toggling in service-content-sections.js.
 */
.service-content-section--tabs {
	text-align: center;
}

.service-tabs {
	margin-block-start: 1.5rem;
	text-align: right;
}

.service-tabs__nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 1.5rem;
}

.service-tabs__tab {
	appearance: none;
	border: 1.5px solid var(--color-primary);
	background: #fff;
	color: var(--color-primary-dark);
	border-radius: var(--radius);
	padding: 0.65rem 1.5rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.service-tabs__tab.is-active {
	background: var(--color-primary);
	color: #fff;
}

.service-tabs__panel {
	display: none;
	background: var(--color-bg-tint);
	border-radius: var(--radius);
	padding: 1.75rem 2rem;
}

.service-tabs__panel.is-active {
	display: block;
}

.service-tabs__panel ul {
	margin-block: 0.5rem 0;
	padding-inline-start: 1.1rem;
	color: var(--color-text-muted);
}

.service-tabs__panel li {
	margin-block-end: 0.4rem;
}

/*
 * Carousel mode (content_sections `is_carousel`) — production's real
 * swiper strip with prev/next buttons (e.g. the same page's "چه
 * مهارت‌هایی در کاردرمانی ذهنی تقویت می‌شوند؟"). Plain CSS scroll-snap +
 * two buttons instead of a JS carousel library, consistent with this
 * theme's no-heavy-dependency approach elsewhere.
 */
.service-content-carousel {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.service-content-carousel__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block: 0.25rem;
	/*
	 * Without this, a flex item's default min-width:auto forces it to stay
	 * at least as wide as its own content — even with overflow-x:auto set
	 * — so the track never actually shrinks to fit and instead pushes the
	 * whole `.service-content-carousel` row wider than its container,
	 * shoving the "next" button out of view entirely (caught on a real
	 * screenshot: only 3 of 4 cards showed and neither nav button was
	 * visible at all).
	 */
	min-width: 0;
	/*
	 * Hide the native scrollbar (flagged on a real screenshot as a stray
	 * gray bar under the cards production doesn't show) — the prev/next
	 * buttons plus mouse-drag scrolling (service-content-sections.js) are
	 * the only visible way to navigate, matching Swiper's own look without
	 * actually using it.
	 */
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}

.service-content-carousel__track::-webkit-scrollbar {
	display: none;
}

.service-content-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.service-content-carousel__item {
	flex: 0 0 min(20rem, 85vw);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	text-align: right;
}

.service-content-carousel__icon {
	width: 4.5rem;
	height: 4.5rem;
	margin-block-end: 0.75rem;
}

.service-content-carousel__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-content-carousel__item h3 {
	margin-block: 0 0.5rem;
}

.service-content-carousel__item ul {
	margin-block: 0.5rem 0;
	padding-inline-start: 1.1rem;
	color: var(--color-text-muted);
}

.service-content-carousel__nav {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-primary-dark);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.service-content-carousel__nav:hover {
	background: var(--color-bg-tint);
}

/*
 * Photo-grid mode (content_sections `photo_grid`) — production's real
 * card shape for some sections (e.g. the same page's "جلسات کاردرمانی
 * ذهنی چگونه برگزار می‌شوند؟"): a full real photo on top, title below —
 * different from the alternating full-width row `.service-hero-cards`
 * uses by default.
 */
.service-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-block-start: 1.5rem;
	text-align: center;
}

@media (max-width: 900px) {
	.service-photo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.service-photo-grid {
		grid-template-columns: 1fr;
	}
}

.service-photo-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.service-photo-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.service-photo-card h3 {
	margin: 0.9rem 1rem;
	font-size: 1rem;
}

.service-photo-card p {
	margin: 0 1rem 1rem;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

/*
 * "Hub card" shape — production's real design for sections like
 * /occupational-therapy/'s "حوزه‌های اصلی خدمات کاردرمانی": a full-width
 * photo+text row per item, alternating sides (checked against the live
 * page's DOM order: odd items put text before the image, even items put
 * the image first — both resolve to alternating visual sides under this
 * theme's RTL flex layout), with an optional CTA button and a row of
 * tag pills below the text. Not every item has a CTA or tags — both
 * render conditionally, matching production exactly (e.g. "کاردرمانی
 * بزرگسالان" genuinely has neither).
 */
.service-content-section--cards {
	text-align: right;
}

.service-hero-cards {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block-start: 1.5rem;
}

.service-hero-card {
	display: flex;
	align-items: center;
	gap: 2rem;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.service-hero-card:nth-child(even) {
	flex-direction: row-reverse;
}

.service-hero-card__media {
	flex: 0 0 auto;
	width: 40%;
	max-width: 20rem;
}

.service-hero-card__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--radius) - 0.25rem);
}

.service-hero-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.service-hero-card__body h3 {
	margin-block-start: 0;
}

.service-hero-card__text p {
	color: var(--color-text-muted);
}

.service-hero-card__cta {
	display: inline-block;
	margin-block-start: 0.5rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
}

.service-hero-card__tags-heading {
	margin-block: 1rem 0.5rem;
	font-size: 1rem;
}

.service-hero-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-hero-card__tags li a,
.service-hero-card__tags li span {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--color-bg-tint);
	color: var(--color-primary-dark);
	font-size: 0.85rem;
	text-decoration: none;
}

.service-hero-card__tags li a:hover {
	background: var(--color-primary);
	color: #fff;
}

@media (max-width: 720px) {
	.service-hero-card,
	.service-hero-card:nth-child(even) {
		flex-direction: column;
		align-items: stretch;
	}

	.service-hero-card__media {
		width: 100%;
		max-width: none;
	}
}

/*
 * Filled colored boxes (light tint closed, solid teal + white text open),
 * custom +/- markers — matches the live site's real FAQ styling
 * (confirmed by screenshot), not the browser-default disclosure triangle
 * this used before.
 */
.service-faq__item {
	border: 0;
	border-radius: 1rem;
	padding: 1.25rem 1.5rem;
	margin-block-end: 1.25rem;
	background: var(--color-bg-tint);
}

.service-faq__item[open] {
	background: linear-gradient(135deg, #2f8fae, #1f7893);
}

.service-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.service-faq__item summary::-webkit-details-marker {
	display: none;
}

.service-faq__item summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-navy);
}

.service-faq__item[open] summary::after {
	content: "\2212";
}

.service-faq__item[open] summary {
	color: #fff;
	margin-block-end: 0.75rem;
}

.service-faq__item[open] summary::after {
	color: #fff;
}

.service-faq__item[open] p {
	color: #eaf7fb;
}

.service-cta {
	margin-block-start: 2rem;
}

.service-children {
	margin-block-start: 1rem;
	padding-block: 2.5rem;
	border-top: 1px solid var(--color-border);
}

/*
 * Contact page (page-contact.php) — real layout confirmed against a live
 * production screenshot: a dark hero band, a 3-card contact-info row,
 * then the form section on a plain page background, then a full-width
 * map with no card wrapper. The background photo itself is real (this
 * page's own _elementor_data, attachment #511) — its dark-teal overlay
 * tint is this theme's own approximation, since the source data has no
 * `background_overlay_*` settings on this container to read an exact
 * value from (unlike the service-page hero, which does).
 */
.contact-hero {
	position: relative;
	background-image: url("../../../../uploads/2025/04/molecular-structure-background-science-template-wallpaper-banner-with-dna-molecules-asbtract-mo_230610-1135.jpg");
	background-size: cover;
	background-position: center;
	padding-block: 3rem;
	text-align: center;
	color: #fff;
}

.contact-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #0b2e3d, #114f5c);
	opacity: 0.88;
}

.contact-hero .wrap {
	position: relative;
	z-index: 1;
}

.contact-hero h1 {
	margin-block-start: 0;
}

.contact-hero p {
	max-width: 40rem;
	margin-inline: auto;
	color: #e7f6f4;
}

.contact-cards {
	margin-block-start: 2.5rem;
	max-width: 60rem;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.contact-cards__card {
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: 0 0 1rem -0.375rem rgba(15, 131, 162, 0.4);
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}

.contact-cards__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	/*
	 * Icon and text grouped together on the right, not spread to opposite
	 * edges — checked against production's real markup for this element
	 * (an Elementor icon-list widget: icon span then text span, plain flex
	 * row, no space-between), which keeps the two adjacent. This theme's
	 * version had `justify-content: space-between` from the start, which
	 * was never right: fixing just the icon side earlier (`row-reverse`)
	 * without also fixing this pushed the icon to the right edge but
	 * stranded the number text at the far LEFT edge instead of next to it
	 * — flagged via screenshot. `flex-end` (with `row-reverse` below,
	 * whose start/end are swapped from a plain row) packs both to the
	 * right, leaving the unused space on the left instead of between them.
	 */
	justify-content: flex-end;
	/* Icon on the right, text on the left — markup order is
	   text-then-icon, so plain `row` under RTL would put the icon at the
	   far LEFT and the text at the right; `row-reverse` swaps which side
	   each one lands on without needing a template change. */
	flex-direction: row-reverse;
}

.contact-cards__row a,
.contact-cards__row span {
	color: var(--color-navy);
	text-decoration: none;
	font-weight: 600;
}

.contact-cards__icon {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
}

.contact-form-section {
	padding-block: 3rem;
	/* Centers the intro text and the form column below it — flagged via
	   screenshot as needing center alignment. Scoped to this section
	   (not the shared `.contact-form__field`/`.contact-form__submit`
	   classes directly) so the homepage's own CTA lead form — which
	   deliberately keeps its labels start-aligned via `.home-cta__form
	   { text-align: start }` — is unaffected. */
	text-align: center;
}

.contact-form-section__intro {
	max-width: 40rem;
	margin-inline: auto;
}

.contact-page__map {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

@media (max-width: 900px) {
	.contact-cards {
		grid-template-columns: 1fr;
	}
}

/* Contact form */

.contact-form {
	max-width: 32rem;
	margin-block-start: 1.5rem;
	margin-inline: auto;
}

/*
 * Standard accessible visually-hidden pattern, not `left: -9999px`. The
 * -9999px trick, combined with `dir="rtl"` and `overflow-x: hidden` on
 * body (both true throughout this theme), reliably blanked the ENTIRE
 * page in headless/software-rendered Chrome — confirmed by isolating it to
 * a 10-line reproduction with nothing else on the page. Almost certainly a
 * Chromium rasterization limit hit by the enormous layer size an
 * off-screen-by-9999px absolutely-positioned element implies in an RTL
 * coordinate space. Real browsers with GPU compositing may never show it,
 * but there's no reason to depend on that when this pattern hides content
 * exactly as well without pushing any coordinate to an extreme.
 */
.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block-end: 1rem;
}

.contact-form__field input,
.contact-form__field textarea {
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	font: inherit;
}

.form-notice {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	margin-block-start: 1rem;
}

.form-notice--success {
	background: #e2f5ec;
	color: #14663f;
}

.form-notice--error {
	background: #fbe7e7;
	color: #8a2b2b;
}

/* Search form */

.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-form__field {
	flex: 1;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
}

/* Blog / generic pages */

.post-summary,
.post-single,
.page-single {
	padding-block: 2rem;
}

.not-found {
	padding-block: 4rem;
	text-align: center;
}

/* Home page — quicklinks / why-us / about / testimonial / faq / articles.
   Real content migrated from the old homepage into SCF fields, see
   local-preview/migrate-front-page.php and front-page.php. */

.home-services h2 {
	margin-block-end: 0.75rem;
}

.home-quicklinks {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
}

.home-quicklinks a,
.home-quicklinks__pending {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-bg-tint);
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--color-text);
}

.home-quicklinks a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.home-quicklinks__pending {
	color: var(--color-text-muted);
	cursor: default;
}

.home-why-us,
.home-testimonial,
.home-faq,
.home-articles {
	padding-block: 3rem;
	border-top: 1px solid var(--color-border);
}

.home-about {
	margin-top: 80px;
	padding-block: 3rem;
	background: #f5fdff;
}

.home-why-us__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-block-start: 1.5rem;
}

.home-why-us__item {
	background: #fff;
	border-radius: 1.5rem;
	box-shadow: 0 0 0.8rem -0.375rem rgba(15, 131, 162, 0.5);
	padding: 1.5rem 1.75rem;
}

.home-why-us__icon {
	width: 3rem;
	height: 3rem;
	margin-block-end: 0.75rem;
}

.home-why-us__item h3 {
	margin-block-start: 0;
	font-size: 1.05rem;
	color: var(--color-navy);
}

.home-why-us__item p {
	margin-block-end: 0;
	color: var(--color-text-muted);
}

/*
 * Front page only: a real 2x2 grid with a decorative center medallion
 * where the four cards cross — matches the live site's own layout for
 * this exact section (confirmed by screenshot, not guessed). Scoped to
 * `.home-why-us .home-why-us__grid` rather than changing the shared
 * class outright, since service pages reuse `.home-why-us__grid` too
 * (see single-service.php's `.service-why-us .home-why-us__grid`) with a
 * variable item count that suits the flexible auto-fit layout better —
 * only the front page's fixed 4-item "چرا مرکز" section gets the fixed
 * 2-column crossing treatment.
 */
.home-why-us .home-why-us__grid {
	position: relative;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid var(--color-border);
	border-radius: 1.5rem;
	overflow: hidden;
	gap: 1px;
	background: var(--color-border);
}

.home-why-us .home-why-us__item {
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	padding: 2.5rem 3rem;
}

.home-why-us__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: #fff;
	border: 1px dashed var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.home-why-us__badge img {
	width: 2.25rem;
	height: 2.25rem;
}

@media (max-width: 700px) {
	.home-why-us .home-why-us__grid {
		grid-template-columns: 1fr;
	}

	.home-why-us__badge {
		display: none;
	}
}

.home-about {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.home-about__image {
	flex: 0 0 min(20rem, 40%);
}

.home-about__image img {
	border-radius: var(--radius);
}

.home-about__body {
	flex: 1;
	min-width: 0;
}

.home-about__body h2 {
	margin-block-start: 0;
}

.home-about__highlight {
	color: #299dbc;
}

.home-testimonial {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*
 * CSS-only scroll-snap carousel — same pattern .service-carousel uses
 * elsewhere in this file, built to hold N reviews from the start (see
 * front-page.php's comment: more real client reviews are coming, this
 * isn't over-engineering for a single item).
 */
.home-testimonial__carousel {
	width: 100%;
	max-width: 34rem;
	margin-block-start: 1.5rem;
}

.home-testimonial__track {
	display: flex;
	/*
	 * Default flex cross-axis behaviour is `stretch` — every card was
	 * being stretched to match the height of whichever review happens to
	 * have the longest quote, so a short one (e.g. a two-sentence review
	 * next to a 300-character one) rendered as mostly dead white space
	 * inside an oversized card. `flex-start` lets each card size to its
	 * own content instead; `min-height` on the card below keeps short
	 * ones from looking too sparse on their own.
	 */
	align-items: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.home-testimonial__track::-webkit-scrollbar {
	display: none;
}

.home-testimonial__card {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: 14rem;
	background: var(--color-bg-tint);
	border: 1px solid #45a1ca26;
	border-radius: 0 1.5rem 0 1.5rem;
	border-block-start: 0.5rem solid #299dbc;
	border-block-end: 0.5rem solid #299dbc;
	padding: 2.5rem 2rem;
	box-sizing: border-box;
}

.home-testimonial__photo {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.home-testimonial__card blockquote {
	margin: 0;
}

.home-testimonial__card cite {
	display: block;
	margin-block-start: 0.75rem;
	font-style: normal;
	font-weight: 600;
	color: var(--color-navy);
}

.home-testimonial__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 1rem;
}

.home-testimonial__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-border);
	cursor: pointer;
}

/*
 * `.is-active` is toggled by assets/js/nav.js as the track scrolls — a
 * static `:first-child` rule always showed dot 1 as "current" regardless
 * of which review was actually in view, which is worse than no indicator
 * at all once there's more than one real review to scroll through.
 */
.home-testimonial__dot.is-active {
	background: var(--color-primary);
}

.home-faq .service-faq__item:first-of-type {
	margin-block-start: 1.5rem;
}

.home-articles__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.home-articles__all {
	white-space: nowrap;
	font-size: 0.9rem;
}

.post-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin-block-start: 1.5rem;
}

.post-card {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.post-card:hover {
	box-shadow: 0 0.5rem 1.25rem rgba(14, 42, 61, 0.12);
}

.post-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.post-card__body {
	padding: 1rem 1.25rem;
}

.post-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.post-card__excerpt {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.post-card__meta {
	margin: 0.5rem 0 0;
	color: var(--color-text-muted);
	font-size: 0.8rem;
}

.post-archive {
	padding-block: 2.5rem;
}

.post-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 2rem;
}

.post-archive__pagination a,
.post-archive__pagination span {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	text-decoration: none;
	color: var(--color-text);
}

.post-archive__pagination .current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

@media (max-width: 900px) {
	.home-about {
		flex-direction: column;
		align-items: stretch;
	}

	.home-about__image {
		flex-basis: auto;
	}

	.home-testimonial__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.home-articles__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}

/*
 * "درباره ما" page (page-about.php) — real layout confirmed against a
 * live production screenshot of this exact page: a light-cyan band
 * holding the intro copy plus a 4-card icon row, matching the same
 * white-card-on-color-band language as the front page's services band.
 */
.about-hero {
	background: var(--color-bg-tint);
	padding-block: 3rem 4rem;
}

.about-hero h1 {
	margin-block-start: 0;
	font-size: 2rem;
}

.about-hero__intro {
	max-width: 52rem;
}

.about-hero__intro p {
	margin-block-end: 0.75rem;
}

.about-hero__icons {
	margin-block-start: 2rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.about-hero__icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 160px;
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: 0 0 0.8rem -0.375rem rgba(15, 131, 162, 0.5);
	padding: 1.5rem 1rem;
	font-weight: 600;
	text-align: center;
}

.about-hero__icon {
	width: 3.5rem;
	height: 3.5rem;
}

.about-instagram {
	padding-block: 3rem;
	text-align: center;
}

.about-instagram h2 {
	margin: 0;
}

@media (max-width: 900px) {
	.about-hero__icons {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.about-hero__icons {
		grid-template-columns: 1fr;
	}
}

/*
 * Arrow-shaped cut on the stats heading panel's inner edge — a real
 * detail confirmed against production's own rendering of this section
 * (both here and on the front page, which shares the exact same stats
 * data), not present before. clip-path coordinates are always in the
 * element's own left-to-right box space regardless of dir:rtl, and this
 * heading panel sits as the rightmost grid column, so the point needs to
 * protrude from the element's own LEFT edge (0%) toward the stat items.
 */
.home-stats__heading {
	clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 22% 100%, 0% 50%);
	padding-inline-start: 3rem;
}